mysql 定义多级表头_js treeData 树形数据结构 无限层级(转载)
js实现无限层级树形数据结构(创新算法)
转载：https://blog.csdn.net/Mr_JavaScript/article/details/82817177
由于做项目的需要，把一个线性数组转成树形数组，在网上查了很多文章，觉得他们写的太复杂了，于是自己写了一个，在折腾了一下午终于把它写出来啦(激动.gif)，用两个filter过滤器就搞定了，代码简洁明了，数据结构小白都能看懂。
js代码：把线性数据转成树形数据
function setTreeData(data){
let cloneData = JSON.parse(JSON.stringify(data)) // 对源数据深度克隆
let tree = cloneData.filter((father)=>{ //循环所有项
let branchArr = cloneData.filter((child)=>{
return father.id == child.parentId //返回每一项的子级数组
});
if(branchArr.length>0){
father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
}
return father.parentId==0; //返回第一层
});
return tree //返回树形数据
}
根据网友给我指出的问题，之前的算法会影响到源数据，之后我对获取的数据进行了深度克隆，完美解决。
实例1：使用element-ui的组件制作一个树形多级嵌套伸缩菜单栏
vue组件：
:data="treeData"
:props="defaultProps"
accordion
@node-click="handleNodeClick">
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)) // 对源数据深度克隆
let tree = cloneData.filter((father)=>{ //循环所有项
let branchArr = cloneData.filter((child)=>{
return father.id == child.parentId //返回每一项的子级数组
});
if(branchArr.length>0){
father.children = branchArr; //如果存在子级，则给父级添加一个children属性，并赋值
}
return father.parentId==0; //返回第一层
});
return tree //返回树形数据
}
},
methods:{
handleNodeClick(data){
// console.log(data)
console.log(this.treeData)
}
},
mounted(){
}
}
显示效果：
java中实现无限层级的树形结构
本文展示了两个实现方法的代码.两个代码的实现方法不同,代码2更为简单. 先看一下最后实现的结果: 最后结果-json 代码1: 实现过程: 1.传入一段json字符串 2.将字符串转换成对象存入节点列 ...
简单叨叨bootstrap按钮无限层级下拉菜单的实现
0.写在前面的话 最近看书都懈怠了,又正值新项目,虽说并不是忙得不可开交,好吧我老实交待,我就是偷懒了其实,博客也没更.言归正传,对于前端的不熟悉现在确实是个让我头疼的事情,以至于一些功能要在网络上漫 ...
js把树形数据转成扁平数据
我就直接上代码了都是实际项目里面用到的 1.假设这个json就已经是树型结构数据了(如果不知道怎么实现树型结构数据请看我另一篇博客) var compressedArr=afcommon.treeDa ...
C# 通用树形数据结构
前言 树在图论中是一种重要的图,由于其自身的许多特殊性质,也是一种重要的计算机数据结构,在很多地方都有用.但是这些树大多都是作为其他应用的内部数据结构来使用.我们无法了解这些树的详细信息,而 .Net ...
Php无限层级并显示层级数
今天在处理递归无限层级菜单时,遇到一个稍微烧脑的问题,如何显示当前节点所在的层级数.废话不多说,我们先看个直观的无限层级:
(js描述的)数据结构[链表](4)
(js描述的)数据结构 [链表](4) 一.基本结构 二.想比于数组,链表的一些优点 1.内存空间不是必须连续的,可以充分利用计算机的内存,事项灵活的内存动态管理. 2.链表不必再创建时就确定大小,并 ...
SQLServer树形数据结构的数据进行数据统计
前言 前几天朋友问我,关于SQLServer数据库中对树形结构的表数据统计问题,需求大致如下: 分类表(递归数据),A的子分类是B,B的子分类是C--分类关系不间断,A为第一层,B为第二层,C为第三层 ...
SQL查询无限层级结构的所有下级，所有上级
无限层级结构的table1表,Id(主键),ParentId(父级id)查询某个Id的所有下级或所有上级,使用WITH AS,UNION ALL 查询 1.查询Id为1所有的下级 WITH T AS( ...
[SinGuLaRiTy] (树形)数据结构题目复习
[SinGuLaRiTy-1023] Copyright (c) SinGuLaRiTy 2017. All Rights Reserved. 普通平衡树 题目描述 你需要写一种数据结构(可参考题目标 ...
随机推荐
kettle系列-kettle管理平台部署说明
本介绍我的开源项目[kettle-manager]kettle管理平台如何获取并部署使用,该项目介绍请参看另一篇博文:http://www.cnblogs.com/majinju/p/5739820. ...
Android之NDK开发(转)
Android之NDK开发 一.NDK产生的背景 Android平台从诞生起,就已经支持C.C++开发.众所周知,Android的SDK基于Java实现,这意味着基于Android SDK进行开发的第 ...
php综合应用
php面试题之五--PHP综合应用(高级部分) 五.PHP综合应用 1.写出下列服务的用途和默认端口(新浪网技术部) ftp.ssh.http.telnet.https ftp:File Transf ...
下载大图的demo by apple,值得研究和参考
https://developer.apple.com/library/content/samplecode/LargeImageDownsizing/Introduction/Intro.html ...
org.gradle.process.internal.ExecException:
com.android.ide.common.process.ProcessException: org.gradle.process.internal.ExecException: Process ...
Codeforces Round #246 (Div. 2)
题目链接:Codeforces Round #246 (Div. 2) A:直接找满足的人数,然后整除3就是答案 B:开一个vis数组记录每一个衣服的主场和客场出现次数.然后输出的时候主场数量加上反复 ...
java工具类(四)之实现日期任意跳转
Java实现日期任意跳转 项目开发过程中,需要进行订单提醒日期的设置,主要包括设置每月指定的日期或者指定的天数,代码如下: public static String DateOperation(Str ...
多态练习题(通过UML建模语言来实现饲养员喂养动物)
项目需求如下图: package com.Summer_0428.cn; /** * @author Summer * 1.构建一个食物抽象类,Bone和Fish分别为其实现类,通过super传参. ...
Core官方DI解析(4)--CallSiteRuntimeResolver
CallSiteRuntimeResolver类型是一个创建或获取服务实例的类型,这个类型继承了CallSiteVisitor这个类型,也是使用 ...
Windows Server 2012 蓝屏 Wpprecorder.sys 故障
坑爹的园区昨天停电了,导致运行中的服务器中断,来电之后,其中有一台Windows 系统的服务无法运行了,接了个显示器,发现无法进入系统了,挂掉了,这下可完蛋了,虽然做了Radio 磁盘阵列,数据不会丢 ...