React Tree树形结构封装工具类
2024-10-21 13:44:26
需要依赖 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)
}
最新文章
- jvm系列(六):jvm调优-从eclipse开始
- C# - 集合类
- PostgreSql性能测试
- 《转载》GET,POST,PUT,DELETE的区别
- python中%和format
- 纸上谈兵:排序算法简介及C实现
- andriod 获得drawable下所有图片
- IOS开发中(null)与<;null>;的处理
- AOP 之 6.1 AOP基础(拾陆)
- Qt 学习之路:存储容器
- debian7 安装配置
- 数据类型的转换String
- 30款基本UX工具 - 思维流程工具 &; 原型工具
- 【codevs】2776寻找代表元
- Net 一个请求的处理流程
- RELabel : 一个极简的正则表达式匹配和展示框架
- mysql如何直接查出从1开始递增的数
- python实现ip地址查询经纬度定位
- 基于Python3的漏洞检测工具 ( Python3 插件式框架 )
- 常用笔记:MySQL
热门文章
- P4711 「化学」相对分子质量 代码
- SpringBoot 项目中配置多个 Jackson 的 ObjectMapper ,以及配置遇到的坑
- prettier+ts+eslint+vscode配置代码保存自动格式化,自动remove unsed declaration,delete no-unused-imports
- NG-ZORRO + angular-cli11 表格横纵向单元格合并,按需设置背景色,解决动态合并单元格动态colspan情况下,nzLeft固定列失效问题,也适用VUE,REACT
- vivo 自研Jenkins资源调度系统设计与实践
- 使用HtmlAgilityPack 爬取 国家统计局 区划和城乡划分代码
- UEFI引导安装UBUNUT
- rt-thread模糊到清晰系列: irq.c
- Module理解及使用
- 2.16 win32信息 事件 机制-创建第一个win32程序