带有上下级关系的数据改为树形菜单的数据

简介: 带有上下级关系的数据改为树形菜单的数据

要转换成树形菜单的格式,首先原数据的格式要有自身ID与上级ID如:

其中id为自身ID,pid为上级ID,默认一级列表的上级ID为0;

let treeid = 0 //初始为一级列表,默认id为0
let treedata = []
let list = {
id: 1,
name: "名称",
pid: 0,
    //所要更改的数据
}
changeTree(list,treeid,reedata)
const changeTree = (datalist, id, newArr) => {
  for (let i = 0; i < datalist.length; i++) {
    if (datalist[i].pid == id) {
      newArr.push(datalist[i]);
    }
  }
  for (let i = 0; i < newArr.length; i++) {
    newArr[i].children = [];
    changeTree(scenicList.value, newArr[i].id, newArr[i].children);
    if (newArr[i].children.length == 0) {
      delete newArr.children;
    }
  }
};
目录
相关文章
|
1月前
|
JavaScript 前端开发
关于键盘导航顺序和 tabindex 属性的关联关系
关于键盘导航顺序和 tabindex 属性的关联关系
|
8月前
|
数据库
Layui入门&动态树&动态选项卡&用户增加&修改&删除&(一)
Layui入门&动态树&动态选项卡&用户增加&修改&删除&
|
1月前
【word】论文、报告:①插入图表题注,交叉引用②快速插入图表目录③删改后一键更新
【word】论文、报告:①插入图表题注,交叉引用②快速插入图表目录③删改后一键更新
342 0
|
11月前
|
存储 C语言
ArcGIS:Excel/Txt 文件生成点图层、属性表编辑的基本方法、属性表之间的连接(合并)和关联的操作、属性表的字段计算器的使用
ArcGIS:Excel/Txt 文件生成点图层、属性表编辑的基本方法、属性表之间的连接(合并)和关联的操作、属性表的字段计算器的使用
239 0
|
8月前
Layui入门&动态树&动态选项卡&用户增加&修改&删除&(二)
Layui入门&动态树&动态选项卡&用户增加&修改&删除&
|
11月前
【项目需求】:两个下拉框之间选项关联
一.利用Option Group Attributes中的disabled属性实现 二.利用下拉框的@change事件
|
11月前
|
容器
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
Echarts实战案例代码(30):同一个id空间Tab按钮显示不同图表防止叠加的解决方案
73 0
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
在比赛中遇到了MP的并列柱状图,看网上对这方面记录并不是很多,所以今天就做一个教程吧。
165 0
MPAndroidChart_并列柱状图,及如何实现点击隐藏掉不需要的条目。
|
JavaScript
在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
326 0
在页面上绘制一张表格,使用 DOM 节点的动态添加和删除向表格中插入数据,点击表格每行后的“删除”超链接
|
Web App开发 API 数据库
零代码实现一对一表关系和无限主子表级联保存
本文主要介绍一对一关系和无限主子表在crudapi系统中的应用。一对一关系是指关系数据库中两个表之间的一种关系。关系数据库中第一个表中的单个行只可以与第二个表中的一个行相关,且第二个表中的一个行也只可以与第一个表中的一个行相关。
268 0
零代码实现一对一表关系和无限主子表级联保存