首页 > 其他分享 >React Tree树形结构封装工具类

React Tree树形结构封装工具类

时间:2023-01-16 16:14:08浏览次数:55  
标签:node nodeInfo Tree param React 树形 let arg config

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

标签:node,nodeInfo,Tree,param,React,树形,let,arg,config
From: https://www.cnblogs.com/disaster/p/17055649.html

相关文章

  • 24.PyQt5【高级组件】树形组件-QTreeWidget
    一、前言QTreeWidget使用类似于QListView类的方式提供一种典型的基于item的树形交互方法类,该类基于QT的“模型/视图”结构,提供了默认的模型来支撑item的显示,这些i......
  • React Hook 系列(三):记一次中台项目的Hook沉淀
    ReactHook系列(三):记一次中台项目的Hook沉淀郭盖_2020年11月17日20:32 ·  阅读1891背景本文旨在分享,Reacthook 在中大型中台项目中的实践,适合熟悉 R......
  • 30. CF-Hamiltonian Spanning Tree
    题目链接给出一个点数为\(n\)的无向完全图,所有边的长度均为\(y\),然后指定该图的一个生成树,将树中的长度改为\(x\),求该图最短的哈密顿路径的长度。先分类讨论,对于\(x......
  • 第七章、react高级
    目录十七、react-router的使用1、URL的hash2、HTML5的History3、router的基本使用4、十七、react-router的使用1、URL的hash<!DOCTYPEhtml><htmllang="en"><head>......
  • Google's B-tree挺快
    #if0#include"set.h"//github.com/Kronuz/cpp-btreeusingnamespacebtree;#else#include<set>//en.cppreference.com/w/cpp/container/multiset#endif#incl......
  • Potree 003 基于Potree Desktop创建自定义工程
    1、第三方js库第三方库js库选择dojo,其官网地址为https://dojotoolkit.org/,git地址为https://github.com/dojo/dojo,demo地址为https://demos.dojotoolkit.org/demos/,如果打......
  • 「AGC018F」Two Trees
    题目点这里看题目。给定两棵树\(A,B\),两棵树均包含\(n\)个结点。结点编号均从\(1\simn\)。现在需要给每个编号分配一个权值,使得两棵树上的任意子树内,所有的结点编......
  • react-路由-新版本新写法
    importReact,{Component}from"react";import{Link,Route,Routes}from"react-router-dom";importHomefrom"./components/Home";importAboutfrom"./co......
  • Android开发学习之路--React-Native之初体验
      近段时间业余在学node.js,租了个阿里云准备搭建后端,想用node.js,偶尔得知react-native可以在不同平台跑,js在iOS和android上都可以运行ok,今天就简单学习下react-native。(......
  • react脚手架配置代理总结
    react脚手架配置代理总结方法一在package.json中追加如下配置"proxy":"http://localhost:5000"说明:优点:配置简单,前端请求资源时可以不加任何前缀。缺点:不能配置......