首页 >> js开发 >> jselement-ui树形控件后台返回的数据+生成组织树的工具类js大全
jselement-ui树形控件后台返回的数据+生成组织树的工具类js大全
发布时间: 2021年1月13日 | 浏览:
| 分类:
js开发
开发项目的时候遇到需要在表单中选择参会人员,根据不同部门下选择不同的人,在element-ui中有树形控件能满足这种情况,后台封装数据记录一下。
封装格式:
返回数据格式:
接收数据的pojo类:2021年4月12日修改2021年4月12日修改2021年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的类型(我是这么理解的,理解的不是很好,网上有很多资料,可自行查看)
/**
* 树形数据实体接口
* @author YangWenHui
* @date 2021年4月11
* @param
*/
public interface dataTree {
public String getId();
public String getParentId();
public void setChildList(List childList);
public List getChildList();
}
/**
* 树形数据实体接口
* @author YangWenHui
* @date 2021年4月11
* @param
*/
public interface dataTree {
public String getId();
public String getParentId();
public void setChildList(List childList);
public List getChildList();
}工具类:
以下的泛型T就是你接收数据的实体类,要继承上面数据接口类
/**
* 获取树型工具类
* @author YangWenHui
*
*/
public class TreeUtil {
//获取顶层节点
public static > List getTreeList(String topId,List entityList){
List resultList = new ArrayList<>();//存储顶层的数据
Map