// js实现树级递归,
// 通过js生成tree树形菜单(递归算法) const data = [
{ id: 1, name: "办公管理", pid: 0 },
{ id: 2, name: "请假申请", pid: 1 },
{ id: 3, name: "出差申请", pid: 1 },
{ id: 4, name: "请假记录", pid: 2 },
{ id: 5, name: "系统设置", pid: 0 },
{ id: 6, name: "权限管理", pid: 5 },
{ id: 7, name: "用户角色", pid: 6 },
{ id: 8, name: "菜单设置", pid: 6 },
]; function toTree(data){
const map = {};
data.forEach(item => {
map[item.id] = {...item};
});
const result= [];
data.forEach((item)=>{
const parent = map[item.pid];
if(parent){
if(!parent.children) parent.children =[];
parent.children.push(item);
}else{
result.push(item);
}
})
return result;
}
console.log(toTree(data));

**********************************

https://segmentfault.com/a/1190000011283221

https://segmentfault.com/a/1190000016226334

https://segmentfault.com/a/1190000003004435

https://blog.csdn.net/chaos_hf/article/details/80150911

https://www.jianshu.com/p/b4d8085e84bd

https://blog.csdn.net/zhangchao19890805/article/details/75195512

toTree的更多相关文章

  1. Scalaz(24)- 泛函数据结构: Tree-数据游览及维护

    上节我们讨论了Zipper-串形不可变集合(immutable sequential collection)游标,在串形集合中左右游走及元素维护操作.这篇我们谈谈Tree.在电子商务应用中对于xml, ...

  2. 好用的php类库和方法

    1, /** * 将一个平面的二维数组按照指定的字段转换为树状结构 * * 用法: * @code php * $rows = array( * array('id' => 1, 'value' ...

  3. tree的遍历--广度优先遍历

    一.二叉树demo var tree = { value: '一', left: { value: '二', left: { value: '四', right: { value: '六' } } } ...

  4. gradle编译自定义注解(annotation)的未解决问题

    最近把一个用eclipse构建的项目,加上了Gradle脚本,用它来编译.虽然最后编译是显示BUILD SUCCESSFUL,但是在编译过程中,却打印出一大堆栈信息,似乎是在编译我自定义的注解时出现的 ...

  5. C#生成树形结构泛型类

    C#生成树形结构泛型类,使用方法: ToTree<ShowMessageUpdatesTableTreeViewModel>.ToDo(models) public class ToTre ...

  6. bootstrap treeview 树形数据生成

    这个问题还是挺经典的,后台只是负责查出所有的数据,前台js来处理数据展示给treeview;show you the code below:<script> $(function () { ...

  7. Laravel-nestedset that base left and right values tree package

    This is a Laravel 4-5 package for working with trees in relational databases. Laravel 5.5, 5.6, 5.7, ...

  8. c#所有部门及其下所部门生成树形图(递归算法获取或键值对方式获取)

    部门数据库的设计: 代码: /// <summary> /// 获取部门(入口) /// </summary> /// <returns></returns& ...

  9. js 数组 转为树形结构

    题目: source = [{ id: 1, pid: 0, name: 'body' }, { id: 2, pid: 1, name: 'title' }, { id: 3, pid: 2, na ...

随机推荐

  1. Cesium实现键盘控制镜头效果

    w-前进   a-左转  d-右转  s-后退  q-上仰 鼠标左键按住左右移动更换角度 html代码如下: <div id="cesiumContainer" style= ...

  2. 《Java大学教程》—第7章 类的实现

    统一建模语言(UML)用方框代表类.方框被分成3部分,第一部分是类名,第二部分是类的属性,第三部分是类的方法.类的属性(属性名称:属性类型):类的方法(方法名称(参数类型):返回值类型).静态的类的属 ...

  3. Teradata的profile使用

    1.proflie优势 使用profile可以批量管理用户参数,尤其是在一批用户具有相同的参数配置时,十分便捷. 2.profile可配置用户参数 [Account id][Default datab ...

  4. UEditor学习笔记1

    首先对于前段时间遇到的一些总结做下记录: 0 == ''  => true transition,渐变属性,其值可以是某属性,也可以是all,如transition: all 0.3s:鼠标放到 ...

  5. C# SHA256加密算法记录

    using System.Text; using System.Diagnostics; using System.Security; using System.Security.Cryptograp ...

  6. MySQL高级知识(八)——ORDER BY优化

    前言:在使用order by时,经常出现Using filesort,因此对于此类sql语句需尽力优化,使其尽量使用Using index. 0.准备 #1.创建test表. drop table i ...

  7. centos7下安装docker(23.docker-swarm之如何访问service)

    如何访问service呢? 为了便于分析,我们重新部署web-server 1.删除service 执行命令docker service rm web-server docker service rm ...

  8. 转://linux下hugepages理解

    就Linux应用程序而言,使用的都是虚拟地址,当应用程序读写一个指定的虚拟地址时,内存管理单元会自动进行虚拟地址到物理地址的转换.一个虚拟地址可以映射到多个物理地址,但当前映射到哪一个物理地址取决于当 ...

  9. maven-resources-plugin插件关于占位符不生效问题

    插件版本: <plugin> <artifactId>maven-resources-plugin</artifactId> <version>3.0. ...

  10. 深入理解session机制

    原文链接https://blog.csdn.net/xihuangwutong/article/details/9819033 1. session概念 2. http协议与状态保持 3. 理解coo ...