需要依赖 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树形结构封装工具类的更多相关文章

  1. 使用ztree.js,受益一生,十分钟学会使用tree树形结构插件

    看到ztree.js,这几个字眼,毋庸置疑,那肯定就是tree树形结构了,曾经的swing年代有jtree,后来jquery年代有jstree和treeview,虽然我没写过,但是我见过,一些小功能做 ...

  2. JAVA之旅(五)——this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块

    JAVA之旅(五)--this,static,关键字,main函数,封装工具类,生成javadoc说明书,静态代码块 周末收获颇多,继续学习 一.this关键字 用于区分局部变量和成员变量同名的情况 ...

  3. Android OkHttp网络连接封装工具类

    package com.lidong.demo.utils; import android.os.Handler; import android.os.Looper; import com.googl ...

  4. 泛型(二)封装工具类CommonUtils-把一个Map转换成指定类型的javabean对象

    1.commons-beanutils的使用 commons-beanutils-1.9.3.jar 依赖 commons-logging-1.2.jar 代码1: String className ...

  5. MySQL JDBC常用知识,封装工具类,时区问题配置,SQL注入问题

    JDBC JDBC介绍 Sun公司为了简化开发人员的(对数据库的统一)操作,提供了(Java操作数据库的)规范,俗称JDBC,这些规范的由具体由具体的厂商去做 对于开发人员来说,我们只需要掌握JDBC ...

  6. Jquery EasyUI Tree树形结构的Java实现(实体转换VO)

    前一阵做的OA项目,有一个是组织架构的树,因为是分开做的,我做的是Controller和页面,其他组做的Service和Dao,因为之前一直没有商量页面用什么框架做比较好,导致,Dao层取出来的数据都 ...

  7. Tree 树形结构

    一.树的基本概念 (1)树(Tree)的概念:树是一种递归定义的数据结构,是一种重要的非线性数据结构. 树可以是一棵空树,它没有任何的结点:也可以是一棵非空树,至少含有一个结点. (2)根(Root) ...

  8. java构建树形菜单递归工具类

    1.设计菜单实体 import java.util.List; public class Menu { //菜单id private Long id; //父节点id private Long par ...

  9. 超简单的okhttp封装工具类(上)

      版权声明:转载请注明出处:http://blog.csdn.net/piaomiao8179 https://blog.csdn.net/piaomiao8179/article/details/ ...

  10. ViewPager封装工具类: 轻松实现APP导航或APP中的广告栏

    相信做app应用开发的,绝对都接触过ViewPager,毕竟ViewPager的应用可以说无处不在:APP第一次启动时的新手导航页,APP中结合Fragment实现页面滑动,APP中常见的广告栏的自动 ...

随机推荐

  1. Ubuntu 22.04 显示检测到窗口系统采用wayland协议

    解决方法 sudo vim /etc/gdm3/custom.conf #WaylandEnable=false 的注释井号去掉 sudo service gdm3 restart 参考资料 http ...

  2. 踩坑纪实----tomcat部署前端服务器不能访问中文文件夹或中文文件名问题

    修改tomcat的server.xml文件(解决含有中文的文件.图片的不能下载.显示的问题): 找到下列配置信息在xml文件中的位置,添加黑体字部分的参数即可(disableUploadTimeout ...

  3. file类创建删除功能的方法-file类遍历(文件夹)目录功能

    file类创建删除功能的方法 public boolean createNewFile():当且仅当具有该名称的文件尚不存在时,创建一个新的空文件.public boolean delete(︰删除由 ...

  4. 在Spring Boot中整合Katharsis,来快速开发JSON API的Web应用

    1 简介 我们进行Web API开发的时候,经常会使用Json格式的消息体,而Json格式非常灵活,不同的人会有不同的设计风格和实现,而JSON API提供了一套标准.但它并不提供直接实现. Kath ...

  5. 【SW】利用3D打印机打印 PCB 钢网的方法

    每完成一个小作品以后,PCB打样回来,手工焊接着费时费力,定制钢网又未免太过浪费,想到自己有一台 FDM 3D 打印机,是不是可以通过 3D 打印机打印 "钢网" 呢? 在网上也翻 ...

  6. php 虚拟目录

    问题: 站点的root目录为 /data/web/ ,现在想在www.111.com 下放一个站点,www.111.com/abc/ 但不能直接在/data/web/下创建abc目录,要放在 /dat ...

  7. 视觉十四讲:第六讲_ceres非线性优化

    使用Ceres求解非线性优化问题,一共分为三个部分: 1. 第一部分:构建cost fuction,即代价函数,也就是寻优的目标式.这个部分需要使用仿函数(functor)这一技巧来实现,做法是定义一 ...

  8. 51nod 1675.序列变换

    序列变换 题目描述 \(lyk\) 有两序列 \(a\) 和 \(b\). \(lyk\) 想知道存在多少对 \(x,y\),满足以下两个条件. \(1:\gcd(x,y)=1\). \(2:a_{b ...

  9. Hexo系列(三):Hexo主题

    作者:独笔孤行 官网:​​ ​http://anyamaze.com​​ 公众号:云实战 Hexo支持更换主题,支持多种主题模式,也支持自定义主题. Hexo主题地址1:https://hexo.io ...

  10. RA维持期达标式减停生物制剂(DRESS研究)的18个月数据

    标签:类风湿关节炎; TNF抑制剂; 达标式减停药物 RA维持期达标式减停生物制剂(DRESS研究): 18个月临床疗效与继续足量应用者相仿 电邮发布日期: 2016-01-14 由于缺乏对常规诊疗有 ...