React Tree树形结构封装工具类
需要依赖 immutable,用于group by分组
buildTree 为入口方法,注意返回的是Immutable.List对象,使用需要调用.toJS()方法转为普通对象
其中 creatNode方法为构建节点对象,可根据自己需求动态修改该方法
import Immutable, { List, Map } from "immutable";
/**
*构建树
* @param dataList 数据源,array/Immutable.List
* @param arg 参数,可选
* @param arg.rootCode 根节点,默认为#
* @param arg.parentField 关联父节点key字段 默认为parent
* @param arg.keyField 当前节点key字段,默认为id
* @param arg.iconRender 图标渲染 func(item,arg)
* @param arg.keyRender func key渲染 func(item,arg) //当需要key做处理时使用,默认为keyField字段值,一般不使用
* @param arg.textRender 文字渲染 func(item,arg) 默认取text字段
* @param arg.checkableRender 复选框显示 func(item,arg) 当树为checkable时使用 默认为true
* @returns {Immutable.List<*>}
*/
export const buildTree = (dataList = List([]), arg) => {
if (!(dataList instanceof List)) {
dataList = Immutable.fromJS(dataList)
}
const config = {
rootCode: "#",
parentField: "parent",
keyField: "id",
iconRender: undefined,
keyRender: (nodeInfo, arg) => {
return nodeInfo.get(arg.keyField)
},
textRender: (nodeInfo, arg) => {
return nodeInfo.get("text")
},
checkableRender: (nodeInfo, arg) => {
return true
},
...arg
}
let treeData = List([])
if (dataList.size === 0) {
return treeData
}
const groupTree = dataList.groupBy(nodeInfo => nodeInfo.get(config.parentField))
if (groupTree && groupTree.size > 0) {
let collection = groupTree.get(config.rootCode);
if (collection && collection.size > 0) {
collection.forEach(role => {
let node = creatNode(role, config)
let list = buildChildren(node, role, groupTree, config);
if (list && list.size > 0) {
node = node.set("children", list)
}
treeData = treeData.push(node)
})
}
}
return treeData
}
//构建子树
const buildChildren = (newParent, oldParent, groupTree = Map({}), config) => {
let childList = groupTree.get(oldParent.get(config.keyField));
let children = List([]);
if (childList && childList.size > 0) {
childList.forEach(role => {
let node = creatNode(role, config)
let list = buildChildren(node, role, groupTree, config);
if (list && list.size > 0) {
node = node.set("children", list)
}
children = children.push(node)
})
}
return children
}
//创建节点,可扩充属性
const creatNode = (nodeInfo, config) => {
let node = {
key: config.keyRender(nodeInfo, config),
title: config.textRender(nodeInfo, config)
}
if (config.iconRender) {
node.icon = config.iconRender(nodeInfo, config)
}
if (config.checkableRender) {
node.checkable = config.checkableRender(nodeInfo, config)
}
return Map(node)
}
React Tree树形结构封装工具类的更多相关文章
- 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件
看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...
- JAVA之旅(五)——this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块
JAVA之旅(五)--this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块 周末收获颇多,继续学习 一.this关键字 用于区分局部变量和成员变量同名的情况 ...
- Android OkHttp网络连接封装工具类
package com.lidong.demo.utils; import android.os.Handler; import android.os.Looper; import com.googl ...
- 泛型(二)封装工具类CommonUtils-把一个Map转换成指定类型的javabean对象
1.commons-beanutils的使用 commons-beanutils-1.9.3.jar 依赖 commons-logging-1.2.jar 代码1: String className ...
- MySQL JDBC常用知识,封装工具类,时区问题配置,SQL注入问题
JDBC JDBC介绍 Sun公司为了简化开发人员的(对数据库的统一)操作,提供了(Java操作数据库的)规范,俗称JDBC,这些规范的由具体由具体的厂商去做 对于开发人员来说,我们只需要掌握JDBC ...
- Jquery EasyUI Tree树形结构的Java实现(实体转换VO)
前一阵做的OA项目,有一个是组织架构的树,因为是分开做的,我做的是Controller和页面,其他组做的Service和Dao,因为之前一直没有商量页面用什么框架做比较好,导致,Dao层取出来的数据都 ...
- Tree 树形结构
一.树的基本概念 (1)树(Tree)的概念:树是一种递归定义的数据结构,是一种重要的非线性数据结构. 树可以是一棵空树,它没有任何的结点:也可以是一棵非空树,至少含有一个结点. (2)根(Root) ...
- java构建树形菜单递归工具类
1.设计菜单实体 import java.util.List; public class Menu { //菜单id private Long id; //父节点id private Long par ...
- 超简单的okhttp封装工具类(上)
版权声明:转载请注明出处:http://blog.csdn.net/piaomiao8179 https://blog.csdn.net/piaomiao8179/article/details/ ...
- ViewPager封装工具类: 轻松实现APP导航或APP中的广告栏
相信做app应用开发的,绝对都接触过ViewPager,毕竟ViewPager的应用可以说无处不在:APP第一次启动时的新手导航页,APP中结合Fragment实现页面滑动,APP中常见的广告栏的自动 ...
随机推荐
- 《Effective C++》关于const,define等总结
(将每一条item的总结和自己的理解给记录下来,以后有需要的话可以再回头参阅这些资料,不懂的再翻书温故.) Item 02:尽量以const ,enum,inline替换#define #define ...
- Ubuntu 22.04 BigSur 美化
安装 tweaks sudo apt update && sudo apt upgrade sudo apt install gnome-tweaks gnome-shell-exte ...
- 表单标签补充及css层叠样式
表单标签补充及css层叠样式 一.表单知识点补充 1.获取用户输入的标签两大重要属性 name属性:类似于字典的键 value属性:类似于与字典的值 # form表单朝后端发送数据的时候,标签必须得有 ...
- 构造方法-JavaBean
构造方法 当一个对象被创建时候,构造方法用来初始化该对象,给对象的成员变量赋初始值. 小贴士:无论你与否自定义构造方法,所有的类都有构造方法,因为Java自动提供了一个无参数构造方法, 一旦自己定义了 ...
- 【分析笔记】DW7888 马达驱动芯片待机模式漏电流过高的问题
发现问题 客户反馈说我们的硬件关机漏电流很大,但是拔掉电池之后再上电(仍处于关机状态)就会恢复为 16~20uA 左右.这让我也讶异,因为亲自测试过,漏电流只有 MCU 的休眠电流 16~20uA 左 ...
- chunjun同步两个带Kerberos认证的CDH集群数据
最近在项目中遇到同步两个 CDH 数据文件的需求,调研了一圈,发现 datax 不支持两个 cdh 同时进行 kerberos 认证,因此切换到 chunjun,chunjun 在 kerberos ...
- 12月5日内容总结——JS基础知识及变量常量、基本数据类型、运算符、流程控制、函数、内置对象
目录 一.JS简介 简介 ECMAScript的历史 二.JS基础 1.注释语法 2.引入js的多种方式 3.结束符号 三.变量与常量 编写和运行js代码的两种方式 变量声明 四.基本数据类型 1.数 ...
- App测试Android的闪退总结
Android的闪退有三种情况: 第一种:没有任何弹框提示,直接退出 第二种:有弹框提示程序异常 第三种:ANR无响应 三种情况的日志提交和检索方法: 第一种情况:是底层C挂了 **首先:提交客户端 ...
- Vue的介绍
目录 Vue介绍 一.前端发展史 二.Vue介绍 1.Vue是什么? 2.M-V-VM 架构思想 3.组件化开发.单页面应用 4.版本问题 三.第一个helloworld 1.了解开发前端的编辑器 2 ...
- 【已解决】将jsp文件在浏览器打开直接出现代码,在浏览器出现本地地址,tomcat报错
问题背景: 导入了一个项目直接打开可以,但是想跟一遍代码,把配置文件全部整理成为一个springmvc的基础配置文件 跟着配置到自己tomcat就不管怎样都是下面的截图 希望可以帮到一起报错的朋友快 ...