javascript中无限分类递归树

摘抄:https://www.cnblogs.com/silfox/p/11411680.html(原文)

列表转换成树形结构方法定义:

 1 //javascript  树形结构
 2 function toTree(data) {
 3     // 删除 所有 children,以防止多次调用
 4     data.forEach(function(item) {
 5         delete item.children;
 6     });
 7 
 8     // 将数据存储为 以 id 为 KEY 的 map 索引数据列
 9     var map = {};
10     data.forEach(function(item) {
11         // 在该方法中可以给每个元素增加其他属性
12         item.text = item.name;
13         map[item.id] = item;
14     });
15     //  console.log(map);
16 
17     var val = [];
18     data.forEach(function(item) {
19 
20         // 以当前遍历项,的pid,去map对象中找到索引的id
21         var parent = map[item.pid];
22 
23         // 好绕啊,如果找到索引,那么说明此项不在顶级当中,那么需要把此项添加到,他对应的父级中
24         if (parent) {
25             // 可以给每个父节点添加属性
26             parent.iconCls = "i-folder";
27             //  添加到父节点的子节点属性中
28             (parent.children || (parent.children = [])).push(item);
29 
30         } else {
31             //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
32             val.push(item);
33         }
34     });
35     return val;
36 }

树形结构数据

 1 var data = [
 2         {
 3             id:1,
 4             name :"一级分类:1",
 5             pid :0,
 6         },
 7         {
 8             id:2,
 9             name :"二级分类:1",
10             pid :1,
11         },
12         {
13             id:3,
14             name :"三级分类:3",
15             pid :2,
16         },
17         {
18             id:4,
19             name :"一级分类:2",
20             pid :0,
21         },
22         {
23             id:7,
24             name :"f级分类:2",
25             pid :4,
26         },
27         {
28             id:10,
29             name :"f级分类:2",
30             pid :7,
31         },
32         {
33             id:9,
34             name :"f级分类:2",
35             pid :10,
36         },
37         {
38             id:12,
39             name :"f级分类:2",
40             pid :9,
41         },
42         {
43             id:15,
44             name :"f级分类:2",
45             pid :12,
46         },
47         {
48             id:13,
49             name :"f级分类:2",
50             pid :15,
51         },
52     ]

 

posted @ 2023-01-10 13:37  juneChen  阅读(83)  评论(0编辑  收藏  举报