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 相关文章推荐
在JavaScript中遭遇级联表达式陷阱
Mar 08 Javascript
JS将制定内容复制到剪切板示例代码
Feb 11 Javascript
浅析js预加载/延迟加载
Sep 25 Javascript
JS实现的打字机效果完整实例
Jun 20 Javascript
微信小程序 WXML、WXSS 和JS介绍及详解
Oct 08 Javascript
Html中 IFrame的用法及注意点
Dec 22 Javascript
微信小程序 ES6Promise.all批量上传文件实现代码
Apr 14 Javascript
input框中自动展示当前日期yyyy/mm/dd的实现方法
Jul 06 Javascript
vue的toast弹窗组件实例详解
May 14 Javascript
jQuery中each和js中forEach的区别分析
Feb 27 jQuery
使用webpack编译es6代码的方法步骤
Apr 28 Javascript
《javascript设计模式》学习笔记三:Javascript面向对象程序设计单例模式原理与实现方法分析
Apr 07 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
php笔记之:数据类型与常量的使用分析
2013/05/14 PHP
PHP截断标题且兼容utf8和gb2312编码
2013/09/22 PHP
PHP中使用SimpleXML检查XML文件结构实例
2015/01/07 PHP
windows平台中配置nginx+php环境
2015/12/06 PHP
PHP的PDO错误与错误处理
2019/01/27 PHP
Nginx+php配置文件及原理解析
2020/12/09 PHP
jQuery 表单验证插件formValidation实现个性化错误提示
2009/06/23 Javascript
Jquery为单选框checkbox绑定单击click事件
2012/12/18 Javascript
jquery自定义滚动条插件示例分享
2014/02/21 Javascript
js图片模糊切换显示特效的方法
2015/02/17 Javascript
JS实现网页背景颜色与select框中颜色同时变化的方法
2015/02/27 Javascript
jquery实现简单的自动播放幻灯片效果
2015/06/13 Javascript
JavaScript的jQuery库中function的存在和参数问题
2015/08/13 Javascript
javascript html5 canvas实现可拖动省份的中国地图
2016/03/11 Javascript
jQuery简单实现仿京东分类导航层效果
2016/06/07 Javascript
vue中的模态对话框组件实现过程
2018/05/01 Javascript
ES6中let 和 const 的新特性
2018/09/03 Javascript
微信小程序返回箭头跳转到指定页面实例解析
2019/10/08 Javascript
ES6 proxy和reflect的使用方法与应用实例分析
2020/02/15 Javascript
基于html+css+js实现简易计算器代码实例
2020/02/28 Javascript
vue解决跨域问题(推荐)
2020/11/10 Javascript
[48:12]Secret vs Optic Supermajor 胜者组 BO3 第三场 6.4
2018/06/05 DOTA
决策树的python实现方法
2014/11/18 Python
Python3导入自定义模块的三种方法详解
2018/04/13 Python
如何利用python查找电脑文件
2018/04/27 Python
Win10下python 2.7.13 安装配置方法图文教程
2018/09/18 Python
简单介绍一下pyinstaller打包以及安全性的实现
2020/06/02 Python
Python 利用flask搭建一个共享服务器的步骤
2020/12/05 Python
在Ubuntu中安装并配置Pycharm教程的实现方法
2021/01/06 Python
美国在线鲜花速递:ProFlowers
2017/01/05 全球购物
Mio Skincare英国官网:身体紧致及孕期身体护理
2018/08/19 全球购物
俄罗斯奢侈品牌衣服、鞋子和配饰的在线商店:INTERMODA
2020/07/17 全球购物
四年级下册教学反思
2014/02/01 职场文书
小学教师办公室制度
2014/02/03 职场文书
有限公司股东合作协议书
2014/10/29 职场文书
Java org.w3c.dom.Document 类方法引用报错
2021/08/07 Java/Android