需要依赖 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)
}

最新文章

  1. jvm系列(六):jvm调优-从eclipse开始
  2. C# - 集合类
  3. PostgreSql性能测试
  4. 《转载》GET,POST,PUT,DELETE的区别
  5. python中%和format
  6. 纸上谈兵:排序算法简介及C实现
  7. andriod 获得drawable下所有图片
  8. IOS开发中(null)与&lt;null&gt;的处理
  9. AOP 之 6.1 AOP基础(拾陆)
  10. Qt 学习之路:存储容器
  11. debian7 安装配置
  12. 数据类型的转换String
  13. 30款基本UX工具 - 思维流程工具 &amp; 原型工具
  14. 【codevs】2776寻找代表元
  15. Net 一个请求的处理流程
  16. RELabel : 一个极简的正则表达式匹配和展示框架
  17. mysql如何直接查出从1开始递增的数
  18. python实现ip地址查询经纬度定位
  19. 基于Python3的漏洞检测工具 ( Python3 插件式框架 )
  20. 常用笔记:MySQL

热门文章

  1. P4711 「化学」相对分子质量 代码
  2. SpringBoot 项目中配置多个 Jackson 的 ObjectMapper ,以及配置遇到的坑
  3. prettier+ts+eslint+vscode配置代码保存自动格式化,自动remove unsed declaration,delete no-unused-imports
  4. NG-ZORRO + angular-cli11 表格横纵向单元格合并,按需设置背景色,解决动态合并单元格动态colspan情况下,nzLeft固定列失效问题,也适用VUE,REACT
  5. vivo 自研Jenkins资源调度系统设计与实践
  6. 使用HtmlAgilityPack 爬取 国家统计局 区划和城乡划分代码
  7. UEFI引导安装UBUNUT
  8. rt-thread模糊到清晰系列: irq.c
  9. Module理解及使用
  10. 2.16 win32信息 事件 机制-创建第一个win32程序