首页 > 其他 > 详细

如何在后台封装el-tree所需要的数据格式

时间:2019-11-20 12:48:19      阅读:347      评论:0      收藏:0      [点我收藏+]

背景

最近遇到了一个分层级展示指标的需求,前端使用el-tree树形组件,要求按官方文档的格式提供数据。

数据格式:

    id: 1,
    label: ‘一级 1‘,
    children: 
        id: 4,
        label: ‘二级 1-1‘,
        children: 
            id: 9,
            label: ‘三级 1-1-1‘,
            children: ...    

封装思路

1、首先我们需要获取到所有的节点,新建一个集合result来保存所有顶级节点,也就是parentId为空的或指定值。

2、然后我们需要找出二级节点存入到顶级节点的childList中,找到三级节点存入到二级节点的childList中,依次类推,最后将result返回。

代码实现:

1、设计实体类

@Data
public class Evaluation {
    private String id;
    private String label;
    private String parentId;
    private List<Evaluation> childList;
}

2、业务代码

public class EvaluationService {
    
    private EvaluationDao evaluationDao;
?
    public List<Evaluation> getEvaluations() {
        // 查出所有指标
        List<Evaluation> all = evaluationDao.findAll();
        
        // 把所有的数据都放到map中
        Map<String, Evaluation> treeMap = new HashMap<>();
        for (int i = 0; i < all.size() && !all.isEmpty(); i++) {
            // 元素的id为键,元素本身为值
            treeMap.put(all.get(i).getId(), all.get(i));
        }
        
        // 将所有顶层节点存入result中
        List<Evaluation> result = new ArrayList<>();
        // 遍历map得到顶层节点或者游离节点
        for (int i = 0; i < all.size(); i++) {
            if (!treeMap.containsKey(all.get(i).getParentId())) {
                result.add(all.get(i));
            }
        }
?
        // 遍历数据,将对象放入父级节点的childList属性中
        for (int i = 0; i < all.size() && !all.isEmpty(); i++) {
            Evaluation Evaluation = treeMap.get(all.get(i).getParentId());
            if (Evaluation != null) {
                // 有父节点,校验父节点下childList是否存在,然后将子节点放入
                if (Evaluation.getChildList() == null) {
                    Evaluation.setChildList(new ArrayList<>());
                }
                // 添加到父节点的ChildList集合下
                Evaluation.getChildList().add(all.get(i));
            }
        }
        return result;
    }
}

 

如果项目中使用的不多的话,这样就可以了。实现方式可以有很多种,用上边的方式的好处在于免去了多次到数据库查询的操作,而且可以灵活封装多层级数据,二层、三层、五层等等都可以。

封装工具类

为了实现代码的复用,我们可以将上方代码封装成工具类。

DataTree接口:

写这个接口类主要是为了下面的工具类,定义泛型T的类型

public interface DataTree<T> {
?
    public String getId();
?
    public String getParentId();
?
    public void setChildList(List<T> childList);
?
    public List<T> getChildList();
}

工具类实现:

以下的泛型T就是接收数据的实体类,要继承上面数据接口类

public class TreeUtils {
?
    //获取顶层节点
    public static <T extends DataTree<T>> List<T> getTreeList(String topId, List<T> entityList) {
        
        List<T> resultList = new ArrayList<>();
?
        Map<Object, T> treeMap = new HashMap<>();
?
        T itemTree;
?
        for (int i = 0; i < entityList.size() && !entityList.isEmpty(); i++) {
            itemTree = entityList.get(i);
            //把所有的数据放到treeMap中,id为key
            treeMap.put(itemTree.getId(), itemTree);
            //把顶层节点放到集合resultList中
            if (topId.equals(itemTree.getParentId()) || itemTree.getParentId() == null) {
                resultList.add(itemTree);
            }
        }
?
        //循环数据,把数据放到上一级的childen属性中
        for (int i = 0; i < entityList.size() && !entityList.isEmpty(); i++) {
            itemTree = entityList.get(i);
            T data = treeMap.get(itemTree.getParentId());
            // 不等于null,也就意味着有父节点
            if (data != null) {
                if (data.getChildList() == null) {
                    data.setChildList(new ArrayList<>());
                }
                //把子节点 放到父节点childList当中
                data.getChildList().add(itemTree);
                //把放好的数据放回map当中
                treeMap.put(itemTree.getParentId(), data);
            }
        }
        return resultList;
    }
}

使用方式:

1、实体类:

设计实体类,实现之前定义好的DataTree接口

@Data
public class Evaluation implements DataTree<Evaluation> {
?
    private String id;
?
    private String label;
?
    private String parentId;
?
    private List<Evaluation> childList;
}

2、调用TreeUtils,传入数据和顶层节点id,即可获取到所需要的数据结构。

public class Test {
    private EvaluationDao evaluationDao;
?
    public List<Evaluation> getEvaluations() {
?
        // 接收在数据库中查询到的数据
        List<Evaluation> data = evaluationDao.findAll();
?
        // 调用工具类,第一个参数是默认传入的顶级id,和查询出来的数据
        return TreeUtils.getTreeList("0", data);
    }
}

参考博客: https://blog.csdn.net/qq_36956154/article/details/79893876

========================================================================================

不要简单的收集学习资料,知识活在百度云或者书签列表中意义不大。

把自己困惑的地方,真正搞懂,写出来。如果别人也能看懂,那才是真的掌握了,坚持下去,应该会有收获。

========================================================================================

 

如何在后台封装el-tree所需要的数据格式

原文:https://www.cnblogs.com/hanstrovsky/p/11896290.html

(0)
(0)
   
举报
评论 一句话评论(0
关于我们 - 联系我们 - 留言反馈 - 联系我们:wmxa8@hotmail.com
© 2014 bubuko.com 版权所有
打开技术之扣,分享程序人生!