element-ui树形控件后台返回的数据+生成组织树的工具类

 开发项目的时候遇到需要在表单中选择参会人员，根据不同部门下选择不同的人，在element-ui中有树形控件能满足这种情况，后台封装数据记录一下。

    封装格式：

    返回数据格式：

    接收数据的pojo类：

2018年4月12日修改

    本以为以上的数据结构能满足项目的使用，但是我错了，当时的数据库中只有不到10条的数据并且组织结构非常单一，随后同事导入了数据（6000多条），组织结构也不是如此单一的了，我在项目中固定了三层结构肯定是错的，要一个活的组织树。

    网上有很多大牛写的方法，递归的、迭代的， 我在看了很多大牛写的方法以后，有了实现思想。

    1.把所有数据查询出来放到一个map集合当中，key值为本身数据的id，value值为数据本身。优点是：只对数据库进行一次查询，避免浪费资源

    2.把查询出来的数据判断其有没有父id，把没有父id的存放一个list集合当中。（顶层数据）

    3.把数据进行for循环，根据本身数据的父id获取map集合当中的数据。例：map.get(entityList.getParentId()),在此之前已经把查询出来的数据一 一放到了map集合当中，其实这一步就是相当于判断本身在所有的数据中有没有父亲。

    4.如果有父亲的话进行判断父亲有没有孩子，有就直接加，没有就先给父亲分配一个空间（房子），有了房子你才能住进去。

    顺着这个思想，以下是代码实现。

    数据的接口类：

    可根据自己本身情况更改接口所要实现的发放，我这接口类只是实现了某些属性的get、set方法，写这个接口类主要是为了下面的工具类，定义泛型T的类型（我是这么理解的，理解的不是很好，网上有很多资料，可自行查看）

1. /**
2. * 树形数据实体接口
3. * @author YangWenHui
4. * @date 2018年4月11
5. * @param <T>
6. */
7. public interface dataTree<T> {
8.  
9.     public String getId();
10.  
11. public String getParentId();
12.  
13. public void setChildList(List<T> childList);
14.  
15. public List<T> getChildList();
16. }

工具类：

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

1. /**
2. * 获取树型工具类
3. * @author YangWenHui
4. *
5. */
6. public class TreeUtil {
7.  
8. //获取顶层节点
9. public static <T extends dataTree<T>> List<T> getTreeList(String topId,List<T> entityList){
10. List<T> resultList = new ArrayList<>();//存储顶层的数据
11.  
12. Map<Object, T> treeMap = new HashMap<>();
13. T itemTree;
14.  
15. for(int i=0;i<entityList.size()&&!entityList.isEmpty();i++) {
16. itemTree = entityList.get(i);
17. treeMap.put(itemTree.getId(),itemTree);//把所有的数据放到map当中，id为key
18. if(topId.equals(itemTree.getParentId()) || itemTree.getParentId() == null) {//把顶层数据放到集合中
19. resultList.add(itemTree);
20. }
21. }
22.  
23. //循环数据，把数据放到上一级的childen属性中
24. for(int i = 0; i< entityList.size()&&!entityList.isEmpty();i++) {
25. itemTree = entityList.get(i);
26. T data = treeMap.get(itemTree.getParentId());//在map集合中寻找父亲
27. if(data != null) {//判断父亲有没有
28. if(data.getChildList() == null) {
29. data.setChildList(new ArrayList<>());
30. }
31. data.getChildList().add(itemTree);//把子节点 放到父节点childList当中
32. treeMap.put(itemTree.getParentId(), data);//把放好的数据放回map当中
33. }
34. }
35. return resultList;
36. }
37. }

实体类：

    接收数据的实体类，其实不用写get、set方法了，因为@Data这个注解已经帮我们写好了get、set方法了，这个注解可以帮我们节省时间。

1. /**
2. * 生成树数据的接收类
3. * @author YangWenHui
4. *
5. */
6. @Data
7. public class OtlDeptMenu implements dataTree<OtlDeptMenu>{
8.  
9.  
10. private String id;
11.  
12. private String parentId;
13.  
14. private String name;
15.  
16. private List<OtlDeptMenu> childList;
17. }

以上写好以后就可以用了。

具体使用：

    在工具类中自动帮我们排好了层级关系

1. /**
2. * 根据数据返回树型结构
3. * @return
4. */
5. public List<OtlDeptMenu> getparticipants(){
6. List<OtlDeptMenu> data = otlMeetPeopleMapper.getDeptName();//接收在数据库中查询到的数据
7. List<OtlDeptMenu> list = new ArrayList<>();//返回的最终集合，可根据自己返回类型更改。
8. List<OtlDeptMenu> tree = TreeUtil.getTreeList("0", data);//调用工具类，第一个参数是默认传入的顶级id，和查询出来的数据
9. OtlDeptMenu result = new OtlDeptMenu();//我在已经生成好的树形结构外面有包了一层。视情况而定，可以不用写
10. result.setId("0");
11. result.setName("请选择参与部门");
12. result.setChildList(tree);
13. list.add(result);//把对象放到list中，前台element-ui中的树形控件需要的是数组的集合
14. return list;
15. }

返回的数据结构：

下面还有很多数据，截图只截了一部分。

研究了一天的时间，速度很慢，也算是涨了经验了，毕竟年轻，以后要多多加油。

到此这篇关于element-ui树形控件后台返回的数据+生成组织树的工具类的文章就介绍到这了,更多相关element树形控件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们！