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


Posted in Javascript onNovember 02, 2020

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 递归实现树状目录操作就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
json 定义
Jun 10 Javascript
基于jquery的模态div层弹出效果
Aug 21 Javascript
js控制input框只读实现示例
Jan 20 Javascript
Jquery在指定DIV加载HTML示例代码
Feb 17 Javascript
Three.js学习之几何形状
Aug 01 Javascript
js 弹出虚拟键盘修改密码的简单实例
Oct 10 Javascript
Javascript中内建函数reduce的应用详解
Oct 20 Javascript
基于node.js制作简单爬虫教程
Jun 29 Javascript
Webpack中publicPath路径问题详解
May 03 Javascript
Angular4 反向代理Details实践
May 30 Javascript
微信内置开发 iOS修改键盘换行为搜索的解决方案
Nov 06 Javascript
JS面向对象编程基础篇(一) 对象和构造函数实例详解
Mar 03 Javascript
antd form表单数据回显操作
Nov 02 #Javascript
antd Select下拉菜单动态添加option里的内容操作
Nov 02 #Javascript
Vue中使用Echarts仪表盘展示实时数据的实现
Nov 01 #Javascript
JavaScript实现刮刮乐效果
Nov 01 #Javascript
微信小程序实现单个或多个倒计时功能
Nov 01 #Javascript
微信小程序实现页面监听自定义组件的触发事件
Nov 01 #Javascript
uniapp微信小程序实现一个页面多个倒计时
Nov 01 #Javascript
You might like
如何正确理解PHP的错误信息
2006/10/09 PHP
php实现获取及设置用户访问页面语言类
2014/09/24 PHP
php实现通用的从数据库表读取数据到数组的函数实例
2015/03/21 PHP
php中 $$str 中 &quot;$$&quot; 的详解
2015/07/06 PHP
thinkphp3.x中cookie方法的用法分析
2016/05/19 PHP
php判断手机浏览还是web浏览,并执行相应的动作简单实例
2016/07/28 PHP
PHP+MYSQL实现读写分离简单实战
2017/03/13 PHP
Laravel数据库读写分离配置的方法
2019/10/13 PHP
PHP实现基本留言板功能原理与步骤详解
2020/03/26 PHP
picChange 图片切换特效的函数代码
2010/05/06 Javascript
javascript日期转换 时间戳转日期格式
2011/11/05 Javascript
jquery触发a标签跳转事件示例代码
2013/07/21 Javascript
js实现的GridView即表头固定表体有滚动条且可滚动
2014/02/19 Javascript
js常用数组操作方法简明总结
2014/06/20 Javascript
js控制输入框获得和失去焦点时状态显示的方法
2015/01/30 Javascript
js HTML5多图片上传及预览实例解析(不含前端的文件分割)
2016/08/26 Javascript
AngularJS中的DOM操作用法分析
2016/11/04 Javascript
Bootstrap警告框(Alert)插件使用方法
2017/03/21 Javascript
js 实现复选框只能选择一项的示例代码
2018/01/23 Javascript
在vscode里使用.vue代码模板的方法
2018/04/28 Javascript
vue-router 中 meta的用法详解
2019/11/01 Javascript
js页面加载后执行的几种方式小结
2020/01/30 Javascript
[07:27]DOTA2卡尔工作室 英雄介绍水晶室女篇
2013/06/21 DOTA
Python实现包含min函数的栈
2016/04/29 Python
情人节快乐! python绘制漂亮玫瑰
2020/08/18 Python
python创建子类的方法分析
2019/11/28 Python
解决Python使用列表副本的问题
2019/12/19 Python
Tensorflow进行多维矩阵的拆分与拼接实例
2020/02/07 Python
英国Flybe航空官网:欧洲最大的独立支线廉价航空公司
2019/07/15 全球购物
Pandora西班牙官方商店:PandoraShop.es
2020/10/05 全球购物
英语专业毕业生自荐信
2013/10/28 职场文书
护理专业毕业生自荐信
2014/06/15 职场文书
六年级小学生评语
2014/12/26 职场文书
毕业班工作总结
2015/08/10 职场文书
2019年世界儿童日宣传标语
2019/11/22 职场文书
SpringBoot整合RabbitMQ的5种模式实战
2021/08/02 Java/Android