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

/**
 * 树形数据实体接口
 * @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树形控件内容请搜索我们以前的文章或继续浏览下面的相关文章希望大家以后多多支持我们!

(0)

相关推荐

  • vue.js element-ui tree树形控件改iview的方法

    element-ui组件的tree树形控件修改源码改为iview组件 实现原理 修改了element-ui源码,把源码里面的tree模块提取出来 然后修改element自带checkbox等组件为iview的checkbox,并且兼容方法 最后修改element样式,改为iview风格,自己也添加了一些样式 新的tree组件可以说是element的逻辑,iview的风格 <template> <div @click.stop="handleClick" v-show=

  • vue elementUI tree树形控件获取父节点ID的实例

    首先找到element-ui.common.js文件 如下 具体看你工程下的node_modules D:\workSpace\vue_manage\node_modules\element-ui\lib\element-ui.common.js 找到getCheckedNodes该方法 细节如下我的该方法在21618行 TreeStore.prototype.getCheckedNodes = function getCheckedNodes() { var leafOnly = argume

  • 详解vue-element Tree树形控件填坑路

    通过tree树形控件的default-checked-keys属性来设置默认选中的节点 html.vue <el-form-item label="角色权限:"> <el-tree :data="data2" show-checkbox node-key="id" @check="handleNodeClick" :default-expanded-keys="[]" ref="

  • elementUI Tree 树形控件的官方使用文档

    Tree 树形控件---官方文档地址 用清晰的层级结构展示信息,可展开或折叠. 基础用法 基础的树形结构展示. <el-tree :data="data" :props="defaultProps" @node-click="handleNodeClick"></el-tree> <script> export default { data() { return { data: [{ label: '一级 1'

  • 详解如何实现Element树形控件Tree在懒加载模式下的动态更新

    Element提供的Tree树形控件,可以用清晰的层级结构展示信息,还可以展开或折叠.Tree支持两种加载模式:一次性加载全部树节点和懒加载模式.所谓懒加载模式,是指当需要展开父节点时才渲染子节点.懒加载模式的应用场景适合树节点数据量大的情形,在一定程度上可以优化图形用户界面的响应效率以及提升用户体验.但是,懒加载模式对数据动态刷新应用需求的支持不尽如意.树形控件节点一旦展开就缓存在本地,后续不会再继续更新和刷新节点数据.本文将介绍如何实现Element树形控件Tree在懒加载模式下的动态更新.

  • ElementUI Tree 树形控件的使用并给节点添加图标

    前言: 因为项目需要用Vue做一个管理系统,其中有一个公司部门的管理页面有用到ElementUI 的树形控件,但是结构中没有使用chexkBox选项框,针对这个功能碰到的一些问题做一下总结 一,数据渲染 1)在<el-tree>标签中绑定data属性 2)在vue实例的data中声明list变量 3)从后台获取到的数据是以数组里面嵌套多个对象的结构并赋值给list, 当前的数据是OrgName为当前结构名称, Children作为子分支数组, 子分支中的结构与当前结构一致 4)在页面中展示结构

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

    开发项目的时候遇到需要在表单中选择参会人员,根据不同部门下选择不同的人,在element-ui中有树形控件能满足这种情况,后台封装数据记录一下. 封装格式: 返回数据格式: 接收数据的pojo类: 2018年4月12日修改 本以为以上的数据结构能满足项目的使用,但是我错了,当时的数据库中只有不到10条的数据并且组织结构非常单一,随后同事导入了数据(6000多条),组织结构也不是如此单一的了,我在项目中固定了三层结构肯定是错的,要一个活的组织树. 网上有很多大牛写的方法,递归的.迭代的, 我在看了

  • Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用. 对于没有层级的数据,我们可以使用表格或卡片来展示.要展示或建立层级关系,就一定会用到树形组件了. 使用Vue + Element UI,构建出最基本的树如下图所示: 现在我们就要在这个基础上进行改造,使页面更加符合我们的交互场景. 下拉菜单 将下拉菜单嵌到树节点中,使操作更加简便.紧凑. 效果演示 效果如图: 图示1:悬浮在树节点状态 图示2:点击三个点图标状态

  • Element的el-tree控件后台数据结构的生成以及方法的抽取

    最近用到了el-tree控件,主要是数据的格式,按照官网的数据格式来就可以显示节点的树形结构了. 代码参考很多 这里给出一个比较好的链接:https://www.jb51.net/article/181990.htm 代码说明在注释里写的很详细了已经,这里不再叙述说明.至于为什么抽取成这种格式的数据,那是因为ElementUI-tree规定的数据格式,你想要用这个控件,就必须按照他们规定的这个格式 来. 数据格式如下: Controller代码 @RequestMapping("/cateLis

  • vue通过element树形控件实现树形表格

    目录 实现效果图 安装依赖 自定义树形控件 其他实现 总结 在vue中通过element树形控件来实现树形表格的效果 通过缩进来实现近似树形表格的效果 实现效果图 安装依赖 $ npm install element-plus --save Element官网 自定义树形控件 分析图中控件分布,每个参数都有固定的width,通过width让数值达到对齐的效果 代码主要通过renderContent函数来自定义树形控件 <template> <div class="mytree&

  • Vue+Element ui实现树形控件右键菜单

    本文实例为大家分享了Vue+Element ui实现树形控件右键菜单的具体代码,供大家参考,具体内容如下 需求 实现树形控件右键菜单功能,有添加文件.删除文件.重命名功能 一.按需引入ELEMENTUI组件 按需引入ELEMENTUI组件 二.实现菜单功能 1.TEMPLATE 代码如下(示例): <!-- 树形组件 -->   <el-tree               :data="data"               @node-contextmenu=&q

  • Element树形控件整合带图标的下拉菜单(tree+dropdown+input)

    目录 需求说明: 实现步骤: 本文主要讲述:自定义树形控件<el-tree> 需求说明: Element UI 官网提供的树形控件包含基础的.可选择的.自定义节点内容的.带节点过滤的以及可拖拽节点的树形结构 如下: 我想要的效果是支持搜索效果的树,将鼠标悬浮后显示添加修改图标,点击图标后弹出对应页面:并且在每个文件夹前添加自定义图标. 实现效果: 实现步骤: 1.使用插槽(slot) <el-col :span="4" :xs="24"> &

  • Vue element树形控件添加虚线详解

    目录 1.实现效果 2.实现代码 3.其他实现 总结 1.实现效果 2.实现代码 树形控件虚线的添加主要通过控制css来实现,并且在树形控件的缩进数只能为0,令class="mytree" <div class="mytree"> <!--indent只能为0--> <el-tree :data="tree_data" :props="defaultProps" @node-click="

  • Element树形控件el-tree懒加载并设置默认展开和选中的效果

    使用elementui树组件,通过懒加载加载数据,并设置默认展开和全部选中的效果. <el-tree :load="loadNode" node-key="org_id" is-connection-line show-checkbox lazy :default-checked-keys="defaultSelectCids" :default-expanded-keys="defaultExpandedCids" :

随机推荐