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


Posted in Javascript onMarch 05, 2020

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

    封装格式:

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

    返回数据格式:

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

    接收数据的pojo类:

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

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的类型(我是这么理解的,理解的不是很好,网上有很多资料,可自行查看)

/**
 * 树形数据实体接口 
 * @author YangWenHui
 * @date 2018年4月11
 * @param <T>
 */
public interface dataTree<T> {
	
    public String getId();
	
  public String getParentId();
  
  public void setChildList(List<T> childList);
  
  public List<T> getChildList();
}

工具类:

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

/**
 * 获取树型工具类
 * @author YangWenHui
 *
 */
public class TreeUtil {
	
	//获取顶层节点
	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.put(itemTree.getId(),itemTree);//把所有的数据放到map当中,id为key
			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());//在map集合中寻找父亲
			if(data != null) {//判断父亲有没有
				if(data.getChildList() == null) {
					data.setChildList(new ArrayList<>());
				}
				data.getChildList().add(itemTree);//把子节点 放到父节点childList当中
				treeMap.put(itemTree.getParentId(), data);//把放好的数据放回map当中
			}
		}
		return resultList;
	}
}

实体类:

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

/**
 * 生成树数据的接收类
 * @author YangWenHui
 *
 */
@Data
public class OtlDeptMenu implements dataTree<OtlDeptMenu>{
	
	
	private String id;
	
	private String parentId;
	
	private String name;
	
	private List<OtlDeptMenu> childList;
}

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

具体使用:

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

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

返回的数据结构:

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

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

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

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

Javascript 相关文章推荐
js与jquery中获取当前鼠标的x、y坐标位置的代码
May 23 Javascript
一行代码实现纯数据json对象的深度克隆实现思路
Jan 09 Javascript
变量声明时命名与变量作为对象属性时命名的区别解析
Dec 06 Javascript
jquery文本框中的事件应用以输入邮箱为例
May 06 Javascript
JavaScript的面向对象编程基础
Aug 13 Javascript
JS 清除字符串数组中,重复元素的实现方法
May 24 Javascript
ES6新特性之函数的扩展实例详解
Apr 01 Javascript
bootstrap日期控件问题(双日期、清空等问题解决)
Apr 19 Javascript
小程序实现多列选择器
Feb 15 Javascript
详解小程序如何动态绑定点击的执行方法
Nov 26 Javascript
js节流防抖应用场景,以及在vue中节流防抖的具体实现操作
Sep 21 Javascript
vue+element table表格实现动态列筛选的示例代码
Jan 14 Vue.js
vue中使用vue-print.js实现多页打印
Mar 05 #Javascript
koa2的中间件功能及应用示例
Mar 05 #Javascript
微信小程序利用for循环解决内容变更问题
Mar 05 #Javascript
javascript将16进制的字符串转换为10进制整数hex
Mar 05 #Javascript
js将URL网址转为16进制加密与解密函数
Mar 04 #Javascript
基于node+websocket+html实现腾讯课堂聊天室聊天功能
Mar 04 #Javascript
VUE实现Studio管理后台之鼠标拖放改变窗口大小
Mar 04 #Javascript
You might like
超人钢铁侠联手合作?美漫作家呼吁DC漫威合作联动以抵抗疫情
2020/04/09 欧美动漫
创建配置文件 用PHP写出自己的BLOG系统 2
2010/04/12 PHP
迅速确定php多维数组的深度的方法
2014/01/07 PHP
PHP使用get_headers函数判断远程文件是否存在的方法
2014/11/28 PHP
php快速查找数据库中恶意代码的方法
2015/04/01 PHP
thinkPHP+PHPExcel实现读取文件日期的方法(含时分秒)
2016/07/07 PHP
基于jquery的模态div层弹出效果
2010/08/21 Javascript
原来Jquery.load的方法可以一直load下去
2011/03/28 Javascript
HTML DOM的nodeType值介绍
2011/03/31 Javascript
javascript Event对象详解及使用示例
2013/11/22 Javascript
js与运算符和或运算符的妙用
2014/02/14 Javascript
jquery实现顶部向右伸缩的导航区域代码
2015/09/02 Javascript
关于JS中match() 和 exec() 返回值和属性的测试
2016/03/21 Javascript
同步异步动态引入js文件的几种方法总结
2016/09/23 Javascript
Nodejs实现多房间简易聊天室功能
2017/06/20 NodeJs
原生JS实现图片无缝滚动方法(附带封装的运动框架)
2017/10/01 Javascript
vue+Java后端进行调试时解决跨域问题的方式
2017/10/19 Javascript
Node.js API详解之 util模块用法实例分析
2020/05/09 Javascript
Python写的贪吃蛇游戏例子
2014/06/16 Python
关于Tensorflow中的tf.train.batch函数的使用
2018/04/24 Python
python实现两张图片拼接为一张图片并保存
2019/07/16 Python
利用ImageAI库只需几行python代码实现目标检测
2019/08/09 Python
Python 写了个新型冠状病毒疫情传播模拟程序
2020/02/14 Python
Python爬虫之App爬虫视频下载的实现
2020/12/08 Python
Levi’s美国官网:美国著名的牛仔裤品牌
2016/08/19 全球购物
意大利会呼吸的鞋:Geox健乐士
2017/02/12 全球购物
Oracle的内存结构(Memory structures)
2015/06/10 面试题
什么是虚拟内存?虚拟内存有什么优势?
2012/02/19 面试题
女大学生毕业找工作的自我评价
2013/10/03 职场文书
实习生的自我评价
2014/01/08 职场文书
组工干部演讲稿
2014/09/02 职场文书
个性发展自我评价2015
2015/03/09 职场文书
办公用品管理制度
2015/08/04 职场文书
2021年pycharm的最新安装教程及基本使用图文详解
2021/04/03 Python
Python Pandas知识点之缺失值处理详解
2021/05/11 Python
Java 数组内置函数toArray详解
2021/06/28 Java/Android