js实现无限层级树形数据结构(创新算法)


Posted in Javascript onFebruary 27, 2020

由于做项目的需要,把一个线性数组转成树形数组,在网上查了很多文章,觉得他们写的太复杂了,于是自己写了一个,在折腾了一下午终于把它写出来啦(激动.gif),用两个filter过滤器就搞定了,代码简洁明了,数据结构小白都能看懂。

js代码:把扁平数据转成树形数据

function setTreeData(source){
  let cloneData = JSON.parse(JSON.stringify(source))   // 对源数据深度克隆
  return cloneData.filter(father=>{           // 循环所有项,并添加children属性
    let branchArr = cloneData.filter(child=> father.id == child.parentId);  // 返回每一项的子级数组
    branchArr.length>0 ? father.children=branchArr : ''  //给父级添加一个children属性,并赋值
    return father.parentId==0;   //返回第一层
  });
}

根据网友给我指出的问题,之前的算法会影响到源数据,之后我对获取的数据进行了深度克隆,完美解决。

封装函数:

function treeData(source, id, parentId, children){  
  let cloneData = JSON.parse(JSON.stringify(source))
  return cloneData.filter(father=>{
    let branchArr = cloneData.filter(child => father[id] == child[parentId]);
    branchArr.length>0 ? father[children] = branchArr : ''
    return father[parentId] == 0    // 如果第一层不是parentId=0,请自行修改
  })
}
 
// 调用时,字段名以字符串的形式传参,如treeData(source, 'id', 'parentId', 'children')

实例1:使用element-ui的组件制作一个树形多级嵌套伸缩菜单栏

实现效果:

js实现无限层级树形数据结构(创新算法)

vue组件:

<template>
 <el-tree
  :data="treeData"
  :props="defaultProps"
  accordion
  @node-click="handleNodeClick">
 </el-tree>
</template>
 
<script>
  export default {
    name: "Test",
   data(){
    return {
     data : [
      {id:1,parentId:0,name:"一级菜单A",rank:1},
      {id:2,parentId:0,name:"一级菜单B",rank:1},
      {id:3,parentId:0,name:"一级菜单C",rank:1},
      {id:4,parentId:1,name:"二级菜单A-A",rank:2},
      {id:5,parentId:1,name:"二级菜单A-B",rank:2},
      {id:6,parentId:2,name:"二级菜单B-A",rank:2},
      {id:7,parentId:4,name:"三级菜单A-A-A",rank:3},
      {id:8,parentId:7,name:"四级菜单A-A-A-A",rank:4},
      {id:9,parentId:8,name:"五级菜单A-A-A-A-A",rank:5},
      {id:10,parentId:9,name:"六级菜单A-A-A-A-A-A",rank:6},
      {id:11,parentId:10,name:"七级菜单A-A-A-A-A-A-A",rank:7},
      {id:12,parentId:11,name:"八级菜单A-A-A-A-A-A-A-A",rank:8},
      {id:13,parentId:12,name:"九级菜单A-A-A-A-A-A-A-A-A",rank:9},
      {id:14,parentId:13,name:"十级菜单A-A-A-A-A-A-A-A-A-A",rank:10},
     ],
     defaultProps: {
      children: 'children',
      label: 'name'
     }
    }
   },
   computed:{
    treeData(){
     let cloneData = JSON.parse(JSON.stringify(this.data))  // 对源数据深度克隆
     return cloneData.filter(father=>{        
      let branchArr = cloneData.filter(child=>father.id == child.parentId)  //返回每一项的子级数组
      branchArr.length>0 ? father.children = branchArr : ''  //如果存在子级,则给父级添加一个children属性,并赋值
      return father.parentId==0;   //返回第一层
     });
    }
   },
   methods:{
    handleNodeClick(data){
     // console.log(data)
     console.log(this.treeData)
    }
   },
   mounted(){
   }
  }
</script>
 
<style scoped>
 
</style>
Javascript 相关文章推荐
File文件控件,选中文件(图片,flash,视频)即立即预览显示
Apr 09 Javascript
jQuery选中select控件 无法设置selected的解决方法
Sep 01 Javascript
jquery链式操作的正确使用方法
Jan 06 Javascript
javascript中使用new与不使用实例化对象的区别
Jun 22 Javascript
jquery模拟实现鼠标指针停止运动事件
Jan 12 Javascript
浅谈JavaScript的全局变量与局部变量
Jun 10 Javascript
JS实现滑动门效果的方法详解
Dec 19 Javascript
使用Angular CLI从蓝本生成代码详解
Mar 24 Javascript
vue-cli3+typescript新建一个项目的思路分析
Aug 06 Javascript
Vue中使用Lodop插件实现打印功能的简单方法
Dec 19 Javascript
React学习之JSX与react事件实例分析
Jan 06 Javascript
详解为element-ui的Select和Cascader添加弹层底部操作按钮
Feb 07 Javascript
js实现树形数据转成扁平数据的方法示例
Feb 27 #Javascript
vue学习笔记之给组件绑定原生事件操作示例
Feb 27 #Javascript
ElementUI Tree 树形控件的使用并给节点添加图标
Feb 27 #Javascript
ElementUI中el-tree节点的操作的实现
Feb 27 #Javascript
element el-tree组件的动态加载、新增、更新节点的实现
Feb 27 #Javascript
element-ui table行点击获取行索引(index)并利用索引更换行顺序
Feb 27 #Javascript
微信小程序录音实现功能并上传(使用node解析接收)
Feb 26 #Javascript
You might like
PHP 循环删除无限分类子节点的实现代码
2013/06/21 PHP
自编函数解决pathinfo()函数处理中文问题
2014/11/03 PHP
浅谈PHP中单引号和双引号到底有啥区别呢?
2015/03/04 PHP
在php和MySql中计算时间差的方法详解
2015/03/27 PHP
Laravel框架实现文件上传的方法分析
2019/09/29 PHP
使用tp框架和SQL语句查询数据表中的某字段包含某值
2019/10/18 PHP
laravel通用化的CURD的实现
2019/12/13 PHP
JavaScript实现页面实时显示当前时间的简单实例
2013/07/20 Javascript
jQuery实现动画效果的简单实例
2014/01/27 Javascript
PHP使用方法重载实现动态创建属性的get和set方法
2014/11/17 Javascript
JavaScript实现获取dom中class的方法
2015/02/09 Javascript
jquery选择器简述
2015/08/31 Javascript
详解react-router如何实现按需加载
2017/06/15 Javascript
NodeJs通过async/await处理异步的方法
2017/10/09 NodeJs
vue.js绑定事件监听器示例【基于v-on事件绑定】
2018/07/07 Javascript
js核心基础之闭包的应用实例分析
2019/05/11 Javascript
JS获取当前时间的年月日时分秒及时间的格式化的方法
2019/12/18 Javascript
react实现复选框全选和反选组件效果
2020/08/25 Javascript
jquery实现简单每周轮换的日历
2020/09/10 jQuery
浅谈JavaScript 声明提升
2020/09/14 Javascript
[04:07]显微镜下的DOTA2第八期——英雄复活动作
2014/06/24 DOTA
对python指数、幂数拟合curve_fit详解
2018/12/29 Python
django 自定义过滤器的实现
2019/02/26 Python
利用Python绘制Jazz网络图的例子
2019/11/21 Python
在Django下创建项目以及设置settings.py教程
2019/12/03 Python
Tensorflow全局设置可见GPU编号操作
2020/06/30 Python
三陽商会官方网站:Sanyo iStore
2019/05/15 全球购物
安全的后院和健身蹦床:JumpSport
2019/07/15 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
超市后勤自我鉴定
2014/01/17 职场文书
劳动工资科岗位职责范本
2014/03/02 职场文书
机关职员工作检讨书
2014/10/23 职场文书
师范生见习总结范文
2015/06/23 职场文书
高三数学教学反思
2016/02/18 职场文书
关于redisson缓存序列化几枚大坑说明
2021/08/04 Redis
详解Oracle数据库中自带的所有表结构(sql代码)
2021/11/20 Oracle