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 相关文章推荐
使用jquery 简单实现下拉菜单
Jan 14 Javascript
jQuery中noconflict函数的实现原理分解
Feb 03 Javascript
jQuery获取标签文本内容和html内容的方法
Mar 27 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
让你一句话理解闭包(简单易懂)
Jun 03 Javascript
微信小程序 wxapp内容组件 progress详细介绍
Oct 31 Javascript
js 中文汉字转Unicode、Unicode转中文汉字、ASCII转换Unicode、Unicode转换ASCII、中文转换
Dec 06 Javascript
JavaScript 完成注册页面表单校验的实例
Aug 19 Javascript
jQuery实现滚动效果
Nov 17 jQuery
webpack实用小功能介绍
Jan 02 Javascript
webpack中使用iconfont字体图标的方法
Feb 22 Javascript
原生javascript制作的拼图游戏实现方法详解
Feb 23 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实现链结人气统计
2006/10/09 PHP
用PHP解决的一个栈的面试题
2014/07/02 PHP
PHP中的静态变量及static静态变量使用详解
2015/11/05 PHP
阿里云PHP SMS短信服务验证码发送方法
2017/07/11 PHP
php JWT在web端中的使用方法教程
2018/09/06 PHP
jquery设置按钮停顿3秒不可用
2014/03/07 Javascript
原生javascript实现拖动元素示例代码
2014/09/01 Javascript
javascript中clipboardData对象用法详解
2015/05/13 Javascript
jQuery动态背景图片效果实现方法
2015/07/03 Javascript
javascript的变量、传值、传址、参数之间关系
2015/07/26 Javascript
Jquery zTree 树控件异步加载操作
2016/02/25 Javascript
jQuery 实现ajax传入参数含有特殊字符的方法总结
2016/10/17 Javascript
纯JS代码实现隔行变色鼠标移入高亮
2016/11/23 Javascript
AngularJS表格样式简单设置方法示例
2017/03/03 Javascript
angular2中Http请求原理与用法详解
2018/01/11 Javascript
学习JS中的DOM节点以及操作
2018/04/30 Javascript
jQuery选择器之基本选择器用法实例分析
2019/02/19 jQuery
vue使用Font Awesome的方法步骤
2019/02/26 Javascript
微信小程序对图片进行canvas压缩的方法示例详解
2020/11/12 Javascript
[04:46]2018年度玩家喜爱的电竞媒体-完美盛典
2018/12/16 DOTA
Python中处理时间的几种方法小结
2015/04/09 Python
解决Django模板无法使用perms变量问题的方法
2017/09/10 Python
Pycharm使用远程linux服务器conda/python环境在本地运行的方法(图解))
2019/12/09 Python
JAVA SWT事件四种写法实例解析
2020/06/05 Python
可以随进度显示不同颜色的css3进度条分享
2014/04/11 HTML / CSS
加拿大建筑和装修专家:Reno-Depot
2017/12/21 全球购物
法国一家芭蕾舞鞋公司:Repetto
2018/11/12 全球购物
Hush Puppies澳大利亚官网:舒适的男女休闲和正装鞋
2019/08/24 全球购物
运行时异常与一般异常有何异同?
2014/01/05 面试题
财政专业求职信范文
2014/02/19 职场文书
小学课外阅读总结
2014/07/09 职场文书
四风问题查摆材料
2014/08/25 职场文书
学术会议通知范文
2015/04/15 职场文书
高中军训感想
2015/08/07 职场文书
使用HTML+Css+transform实现3D导航栏的示例代码
2021/03/31 HTML / CSS
Windows Server 2008 修改远程登录端口以及配置防火墙
2022/04/28 Servers