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 相关文章推荐
各情景下元素宽高的获取实现代码
Sep 13 Javascript
使用AngularJS 应用访问 Android 手机的图片库
Mar 24 Javascript
Js实现无刷新删除内容
Apr 29 Javascript
javascript实现可全选、反选及删除表格的方法
May 15 Javascript
JavaScript让Textarea支持tab按键的方法
Jun 26 Javascript
JavaScript编写简单的计算器
Nov 25 Javascript
纯JavaScript基于notie.js插件实现消息提示特效
Jan 18 Javascript
详解angular中如何监控dom渲染完毕
Jan 03 Javascript
vue学习笔记之vue1.0和vue2.0的区别介绍
May 17 Javascript
在Vue中使用echarts的实例代码(3种图)
Jul 10 Javascript
JavaScript对象原型链原理详解
Feb 05 Javascript
小程序实现背景音乐播放和暂停
Jun 19 Javascript
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
php5编程中的异常处理详细方法介绍
2008/07/29 PHP
php上传图片之时间戳命名(保存路径)
2014/08/15 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
利用PHP计算有多少小于当前数字的数字方法示例
2020/08/26 PHP
javascript针对DOM的应用分析(四)
2012/04/15 Javascript
js操纵dom生成下拉列表框的方法
2014/02/24 Javascript
鼠标悬浮停留三秒后自动显示大图js代码
2014/09/09 Javascript
果断收藏9个Javascript代码高亮脚本
2016/01/06 Javascript
浅析jquery与checkbox的checked属性的问题
2016/04/27 Javascript
JS中对象与字符串的互相转换详解
2016/05/20 Javascript
javascript编程开发中取色器及封装$函数用法示例
2017/08/09 Javascript
Vue项目webpack打包部署到Tomcat刷新报404错误问题的解决方案
2018/05/15 Javascript
原生JS实现旋转轮播图+文字内容切换效果【附源码】
2018/09/29 Javascript
python 排序算法总结及实例详解
2016/09/28 Python
python使用folium库绘制地图点击框
2018/09/21 Python
centos 安装Python3 及对应的pip教程详解
2019/06/28 Python
解决python 上传图片限制格式问题
2019/10/30 Python
Python3.7在anaconda里面使用IDLE编译器的步骤详解
2020/04/29 Python
使用pandas库对csv文件进行筛选保存
2020/05/25 Python
python 读txt文件,按‘,’分割每行数据操作
2020/07/05 Python
解决python对齐错误的方法
2020/07/16 Python
pycharm最新激活码有效期至2100年(亲测可用)
2021/02/05 Python
HTML5中5个简单实用的API(第二篇,含全屏、可见性、拍照、预加载、电池状态)
2014/05/07 HTML / CSS
加拿大知名的国际儿童品牌:Hatley
2016/11/09 全球购物
中东地区为妈妈们提供一切的头号购物目的地:Sprii
2018/05/06 全球购物
市场营销个人求职信范文
2014/02/02 职场文书
药学职务聘任书
2014/03/29 职场文书
网络优化专员求职信
2014/05/04 职场文书
电工技术比武方案
2014/05/11 职场文书
电子商务专业应届生求职信
2014/05/28 职场文书
计划生育诚信协议书
2014/11/02 职场文书
商场圣诞节活动总结
2015/05/06 职场文书
2016三八妇女节慰问信
2015/11/30 职场文书
python 如何在list中找Topk的数值和索引
2021/05/20 Python
详解Redis复制原理
2021/06/04 Redis
MongoDB数据库常用的10条操作命令
2021/06/18 MongoDB