• 欢迎访问大姚哥前端笔记
  • 如果您觉得本站非常有看点,那么赶紧使用Ctrl+D 收藏吧
  • 欢迎留言o(∩_∩)o 哈哈

不递归实现无限菜单树的存储与读取

JavaScript dayaoge 729次浏览

为了方便存储,数据库中每条菜单项都是一条记录,一般有个父节点id的字段。结构如下:

list = [
    { 
         id:"1",
         name:"一级菜单a", 
         pid:'0'
     },
    { 
         id:"3",
         name:"二级菜单a1", 
         pid:'1'
     },
    { 
         id:"2",
         name:"一级菜单b", 
         pid:'0'
     },
    { 
         id:"4",
         name:"二级菜单b1", 
         pid:'2'
     },
    { 
         id:"5",
         name:"二级菜单b2", 
         pid:'2
     },
    { 
         id:"6",
         name:"三级菜单b21", 
         pid:'5'
     },
]

这里我们要保证子节点的ID,永远要比父节点的ID大,然后根据ID倒叙排列。作为一个灵魂画师,下面得靠图说话。排序成如下:
5101
定义一个空数组,用来存放输出结果。然后遍历该数组,根据其pid找到其父节点然后放到父节点的children字段里。like this:
5102
最后如果pid等于0,那么该节点就可以push进刚定义的数组里了。因为子节点在前面,循环到该节点时其子节点已经都存放到children字段里了。最终该数组就是我们得到的json格式了。

原理讲完了先附上代码把。这里的list是我从mongodb里读出来的时候已经排好序了。

module.exports =  {
    /**
    * - 传入list获取权限结构树形json
    * @params list 
    */
    getTreeData: (list)=>{
        var map = {};
        list.forEach(function (item) {
            map[item.id] = item;
        });
        var result = [];
        list.forEach(function (item) {
            var parent = map[item.pid];
            if (parent) {
                (parent.children || ( parent.children = [] )).push(item);
            } else {
                result.push(item);
            }
        });
        return result;
    },
}

小白公园 , 版权所有丨如未注明 , 均为原创丨本网站采用BY-NC-SA协议进行授权 , 转载请注明不递归实现无限菜单树的存储与读取
喜欢 (4)