react+antd 递归实现树状目录操作

1.写在前面

作为前端小白的我一直对算法和数据结构浅尝辄止,哝,吃亏了。使用多次递归实现数据格式化后将数据进行树状展示的目的,分享一下我这次挠头的经历~

2.数据

后台传过来的数据大概是这样的

{
 "data":[
 {
 "id":1,
 "name":"一级节点",
 "parentId":0,
 "isValid":true,
 "canAddChild":true,
 "parent":null,
 "children":[]
 },{
 "id":3,
 "name":"二级节点",
 "parentId":1,
 "isValid":true,
 "canAddChild":true,
 "parent":null,
 "children":[]
 }
 ],
 "status":1
}

3.数据格式

data里面每个元素的parentId指向是父级元素的id,parentId为0的是结构树的顶级元素,但现在是个平面的数组不好处理,而我们要做的是树状的结构,所以首先要对数据进行格式化,将一个元素的所有子元素放到该元素的children属性中去。那么,递归就来了。

 createTree = data => {
 let treeArr = [];
 //获取顶级父元素集合
 let roots = data.filter(elemt => elemt.parentId === 0);
 treeArr.push(...roots);
 //从顶级元素开始,获取每个元素的子元素放到该元素的children属性中
 const getChildren = (resultarr,data) => {
  resultarr.forEach((elemt,index) => {
   elemt.children = data.filter((item,index) => item.parentId === elemt.id);
   //判断当前元素是不是有子元素被添加,如果有,再在子元素这一层循环
   if(elemt.children.length > 0){
    getChildren(elemt.children,data);
   }
  });
 }
 getChildren(treeArr,data);
 //最后更新一下数据
 this.setState({
  treeArr
 })

4.组件格式

因为UI组件用的是antd,使用Tree和TreeNode做树结构。因为数据已经是树状的了,而且深度我们不确定,想要按层级输出UI控件,那么,递归又来了。

renderTree = jsonTree => jsonTree.map( value => {
 //遍历树状数组,如果发现他有children则先套上<TreeNode>,再对他children中的元素做相同的操纵,直到children为空的元素停止,说明他们已经是最深的那一层了。
  if(value.children){
   return(
    <TreeNode title={
     <span>
     {value.name}
     <Icon type="plus" onClick={this.showModal.bind(this,2,value.id)} />
     <Icon type="edit" onClick={this.showModal.bind(this,1,value.id)} />
     <Icon type="delete" onClick={this.showModal.bind(this,0,value.id)} />
     </span>
    } key={value.id}>
     //对children中的每个元素进行递归
     {this.renderTree(value.children)}
    </TreeNode>
   )
  }
 })

至此,就基本完成对数据的格式和对UI树的格式啦,最后在树控件中调用它,OK~

5.疯狂输出

 render(){
 return(
 <Tree showLine={true}>
 {this.renderTree(this.state.treeArr)}
 </Tree>
 )
 }

运行,Bingo~

tips

因为目录树的每一项都是可编辑的,而原始的UI组件也没有可用配置,后来查阅文档竟然应该在TreeNode的title树形中添加树的自定义元素,可以,很强势,官方文档,看就完了,哈哈。

补充知识:antd的tree树形组件异步加载数据小案例

前不久,做业务需求时遇到一个树形选择的 问题 , 子节点的数据要通过点击展开才去加载,在antd给出的官方文档中也有关于动态加载数据的demo,然而不够详细,自己研究之后,整理出来共享给大家借鉴下。

view.jsx(纯函数式声明)

// 渲染树的方法

const loop = data => data.map((item) => {
  const index = item.regionName.indexOf(modelObj.searchValue);
  const beforeStr = item.regionName.substr(0, index);
  const afterStr = item.regionName.substr(index + modelObj.searchValue.length);
  const title = index > -1 ? (
  <span>
   {beforeStr}
   <span style={{ color: '#f50' }}>{modelObj.searchValue}</span>
   {afterStr}
  </span>
  ) : <span>{item.regionName}</span>;
  if (item.children && item.children.length > 0) {
  return (
   <TreeNode key={item.regionCode} parentId={item.parentId} title={getTreeTitle(title, item)}>
   {loop(item.children)}
   </TreeNode>
  );
  }
  return <TreeNode key={item.regionCode} parentId={item.parentId} title={getTreeTitle(title, item)} isGetDealer={item.isGetDealer} isLeaf={item.isLeaf}/>;
  });

//树结构展开触发的方法

const onExpand = (expandedKeys) => {
  console.log('onExpand-->', expandedKeys);

  dispatch({
  type: `${namespace}/onExpand`,
  payload: {
   expandedKeys,
   autoExpandParent: false,
  }
  });
 }

//异步加载树形结构子节点的方法

 const onLoadData = (treeNode) => {
  return new Promise((resolve) => {
  resolve();
  if(treeNode.props.isGetDealer===1){
  let cityIds =treeNode.props.eventKey;

  dispatch({
   type: `${namespace}/queryDealers`,
   payload: {
   checkedKeys:cityIds,
   }
  });
  }
 })
 }

//节点被选中时触发的方法

 const onCheck = (checkedKeys,e) => {
 console.log('checkedKeys',checkedKeys);

 if(checkedKeys.length > 0) {
  updateModel(checkedKeys,'checkedKeys');
 } else {
  updateModel([], 'sellers');
  updateModel([], 'checkedKeys');
 }
 }

//dom渲染

return (
 {/* 经销商省市选择 */}
     {
     modelObj.designatSeller === 1 && <div style={{marginBottom:20}}>
      <div className = {styles.treeStyle} style={{ backgroundColor: '#FBFBFB', width: 343, paddingLeft: 8, height: 200, overflow: 'auto' }}>
      <Tree
       checkable
       onExpand={onExpand}
       expandedKeys={modelObj.expandedKeys}
       checkedKeys={modelObj.checkedKeys}
       //checkStrictly={true}
       autoExpandParent={modelObj.autoExpandParent}
       onCheck={onCheck}
       loadData={onLoadData}
      >
       {loop(modelObj.countryList)}
      </Tree>
      </div>
     </div>
     }
)

mod.js

//初始默认状态

const defaultState = {
 countryList:[], //省市树
 expandedKeys: [], //树数据
 autoExpandParent: true,
 checkedKeys:[],//当前选中的节点
}

// 方法列表

 effects: {
  //根据城市获取经销商
 *queryDealers({payload}, { call, put, select }) {
  let {countryList} = yield select(e => e[tmpModule.namespace]);

  let {data, resultCode } = yield call(queryDealers, {cityCodes:payload.checkedKeys});

  if(resultCode === 0 && data.length > 0) {

  let sellers = data.map(x=>x.dealerId);

  yield put({
   type: 'store',
   payload: {
   sellers
   }
  });

  let gdata = groupBy(data, 'cityCode');

  setgData(countryList);

  yield put({
   type: 'store',
   payload: {countryList }
  });

  function setgData(arr) {
   if(arr&&arr.length>0){
   arr.forEach(x=>{
    if(x.regionCode.split(',')[1] in gdata) {
    x.children = gdata[x.regionCode.split(',')[1]].map(x=>{
     return {
     children:[],
     regionName:x.dealerName,
     regionCode:x.provinceCode+','+x.cityCode+','+x.dealerId,
     regionId:x.dealerId,
     isLeaf:true
     };
    })
    } else {
    setgData(x.children);
    }
   })
   }

  }

  }
 },

//获取省市树

 *queryCountry({ }, { call, put, select }) {
  let { countryList,biz} = yield select(e => e[tmpModule.namespace]);
  let resp = yield call(queryCountry);
  // console.log('resp_country-->',resp)
  if(resp.resultCode === 0){
   let dataList = cloneDeep(countryList);
   dataList = [{
   children: resp.data,
   regionName:'全国',
   regionId:'100000',
   regionCode:'100000'}];
   dataList.map((one,first)=> {
   one.children.map((two,second)=> {
    two.children.map((three,third)=> {
    three.children.map((four,fouth)=>{
     four.regionCode = three.regionCode+','+four.regionCode;
     //是否为最后的子节点去获取经销商
     four.isGetDealer=1;
     four.children = [];
    })
    })
   })
   })
   yield put({
   type: 'store',
   payload: {countryList: dataList }
   });
  }
 },
 //展开节点触发
  *onExpand({ payload }, { call, put, select }){
  yield put({
   type: 'store',
   payload: {
   expandedKeys:payload.expandedKeys,
   autoExpandParent:payload.autoExpandParent
   }
  });
  },
 }

回显时后端需要返回的数据格式如下:

checkedKeys:[0:"500000,500100,2010093000863693"

1:"500000,500100,2010093000863790"]

说明: 这个例子只是贴出了一部分重要代码,具体使用时需要补充完整。

以上这篇react+antd 递归实现树状目录操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • 解决antd 下拉框 input [defaultValue] 的值的问题

    项目中有下拉框跟input需要回显,所以用到defaultValue这个默认值,在后台调接口调到defaultValue这个值给select设置,但是不好使 解决方法 直接用value 先加载选中的条目再加载默认值 初始的时候选中调模是空所以就会加载默认值 这样就解决了 但是在选择下拉的时候 要给scoreFrom值 补充知识:antd Form组件行并列显示 Form表单属性为inline时,表单组件宽度问题 formLayout 不起作用 Form标签 layout属性设置为'inline'

  • antd design table更改某行数据的样式操作

    antd Table里面有一个rowClassName方法 表格行的类名 Function(record, index):string-->返回类型是String类型. 例子: import styless from './component/record.css';--->引入css样式. css: .csbsTypes{ font-family:微软雅黑, "Open Sans", "宋体"; font-weight: bold; } 代码: <

  • antd的select下拉框因为数据量太大造成卡顿的解决方式

    相信用过antd的同学基本都用过select下拉框了,这个组件数据量少的时候很好用,但是当数据量大的时候,比如大几百条上千条甚至是几千条的时候就感觉一点都不好用了,卡的我怀疑人生,一点用户体验都没有了. 当然这不是我想去优化它的动力,主要是公司业务人员和后端的同事也无法忍受,于是我只能屈从于他们的淫威.... 想要优化肯定要知道为什么会卡,初步判断就是数据量过大导致渲染option组件的时间过长导致卡顿,于是想要不卡只能限制渲染的数据数量. 我的想法是这样的:任何时候都只渲染前100条数据以保证

  • antd form表单数据回显操作

    index页面有一个表格,有一个新增按钮,点击新增按钮或表格编辑弹出表单模块,如果是编辑,会回显对应的表格中的数据 //index页面 import React from 'react' import { Table, Button, message, Input, Select, Modal, } from 'antd'; const Option = Select.Option; import AddOrEdit from './AddOrEdit ' class List extends

  • antd配置config-overrides.js文件的操作

    下载antd 包 npm install antd 下载依赖包(定义组件按需求打包) npm install react-app-rewired customize-cra babel-plugin-import 自定义less-loader,改变antd默认样式 npm install less less-loader 根目录定义加载按需打包的js配置模块: config-overrides.js const {override,fixBabelImports,addLessLoader} =

  • antd多选下拉框一行展示的实现方式

    我们都知道antd的select多选时,如果下拉框宽度不足,则自动浮动到下一行将下拉框撑大,但是这回影响到页面的整体布局. 我们期望的效果是,下拉框只显示一行的值,超出一行的部分自动隐藏. 下面有2种方案来实现这个效果. 1.利用浮动原理 设置下拉框的最大高度为一行的高度,然后超出的部分隐藏. .ant-select-selection--multiple { max-height: 32px; overflow: hidden; } 这种方式存在的弊端是如果有2个选项,一个很短一个很长,那么只

  • react使用antd表单赋值,用于修改弹框的操作

    1.使用getFieldDecorator的initialValue 2.在state里定义一个变量存表格的数据 3.给打开弹框的方法传个record 4.把表格里的值存到state 5.把在state里存的值传给弹框 6.获取传过来的值 7.在取消方法和修改成功后中给赋空值,要不然,点击添加的方法表单里面会有值 7.OK 补充知识:react中使用antd的表单重置数据 resetFields 重置一组输入控件的值(为 initialValue)与状态,如不传入参数,则重置所有组件 Funct

  • antd Select下拉菜单动态添加option里的内容操作

    antd Select下拉菜单动态添加option里的内容,通过form表单绑定select选中的值 提供一个公共的方法,每次只需去调用这个方法就行了 //这里是示例数据格式 let giftScope =[ { code:200, id:1, name:"张三" }, { code:300, id:2, name:"李四" }, { code:400, id:3, name:"王五" }, { code:500, id:4, name:&quo

  • react+antd 递归实现树状目录操作

    1.写在前面 作为前端小白的我一直对算法和数据结构浅尝辄止,哝,吃亏了.使用多次递归实现数据格式化后将数据进行树状展示的目的,分享一下我这次挠头的经历~ 2.数据 后台传过来的数据大概是这样的 { "data":[ { "id":1, "name":"一级节点", "parentId":0, "isValid":true, "canAddChild":true, &q

  • C# 递归查找树状目录实现方法

    1.递归查找树状目录 复制代码 代码如下: public partial class Form1 : Form    {        string path = @"F:\学习文件";//递归查找树状目录        public Form1()        {递归查找树状目录            InitializeComponent();        }        private void Form1_Load(object sender, EventArgs e) 

  • CSS制作树状目录教程

    本篇详细介绍如何利用CSS能方便地控制对象的"显示"和"隐藏"属性原理,制作一个树状目录,用CSS制作这样的树状目录,方法简单,代码也比较少,所以把它写出来,给网友们共亨,以便在需要的时候也可动手做一个. 索易电子杂志大多采用树状目录,当鼠标点击主目录时,展开子目录:当再次点击主目录时,则关闭子目录.显得简捷明快,朴实无华. 制作这种树状目录的方法较多,最近我先看下面的示例:当用鼠标在主目录上点一下,就下拉出相应的子目录,再点一下,又恢复原状,其效果与索易电子杂志上

  • PHP递归实现层级树状展开

    本文实例为大家分享了PHP递归实现层级树状展开的主要代码,供大家参考,具体内容如下 效果图: 实现代码: <?php $db = mysql_connect('localhost', 'root', 'root') or die('Can\'t connect to database'); mysql_select_db('test') or die('Can\'t find database : test'); $result = mysql_query('select id, fid, na

  • golang通过递归遍历生成树状结构的操作

    业务场景: 一个机构查询科室信息的时候,希望返回树状结构的嵌套格式; 解决办法: 通过递归和指针,嵌套成对应的结构体; 借鉴了前人的代码,但是最后递归的指针调用自己也是调试了半天才出来,这里献上完整的示例代码. package main import ( "fmt" "encoding/json" ) type dept struct { DeptId string `json:"deptId"` FrameDeptStr string `jso

  • MySQL实现树状所有子节点查询的方法

    本文实例讲述了MySQL实现树状所有子节点查询的方法.分享给大家供大家参考,具体如下: 在Oracle 中我们知道有一个 Hierarchical Queries 通过CONNECT BY 我们可以方便的查了所有当前节点下的所有子节点.但很遗憾,在MySQL的目前版本中还没有对应的功能. 在MySQL中如果是有限的层次,比如我们事先如果可以确定这个树的最大深度是4, 那么所有节点为根的树的深度均不会超过4,则我们可以直接通过left join 来实现. 但很多时候我们无法控制树的深度.这时就需要

  • Java Swing树状组件JTree用法实例详解

    本文实例讲述了Java Swing树状组件JTree用法.分享给大家供大家参考,具体如下: 一.简单样式 先看运行效果: TreeNodeDemo.java package awtDemo; import javax.swing.JFrame; import javax.swing.JTree; import javax.swing.event.TreeSelectionEvent; import javax.swing.event.TreeSelectionListener; import j

  • js 递归json树实现根据子id查父id的方法分析

    本文实例讲述了js 递归json树实现根据子id查父id的方法.分享给大家供大家参考,具体如下: 最近做了一个类似用js实现思维导图的功能,作为思维导图,一定会有树状结构的数据产生,在操作里面的节点时会经常需要查找节点 的父节点及父节点. 对于未知层级的树状数据,用for循环是无法实现的,因为不知道要循环几层,那么最合适的方法就是用js递归 界面结构: json数据: "orgTreeData":{ "nodeId":"19A5B", "

  • Python 无限级分类树状结构生成算法的实现

    后端研发的同学对无限级分类肯定映像深刻,当初花了不少时间吧? 无限级分类树状结构的应用场景很多,例如后端研发需要把用户相关权限读取出来并生成树状结构,前端研发拿到权限树之后可以按照结构展示用户有权限访问的栏目:再例如网页上的栏目分级: 作者在初次接触树状结构生成需求的时候,也是挠头,后来找到了一个代码少且清晰易懂的生成算法:递归. 首先,确保数据库中存储的类别信息如下: [ {"id": 1, "name": '电器', "parent": 0}

  • js如何构造elementUI树状菜单的数据结构详解

    背景说明 elementUI中自带树状菜单,就是数据结构有点复杂,偏向json风格. 数据库中菜单数据是二维表格,通过parentPk定义上下级,是list型. 需要把list转换成tree的结构. elementUI树状菜单的数据结构 每个节点有4个属性,id.label.newVal.children数组: 通过children数组包含关系标示上下级. var treeData={ id: 1, label: '一级 1', newVal: "", children: [{ id:

随机推荐