js构建树形菜单

数据以数组形式存储,元素包括id和pid

var 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 },
];

生成的数据如下:

var data = [
	{id: 1, name: "办公管理", pid: 0 ,
		children:[
			{ id: 2, name: "请假申请", pid: 1,
				children:[
					{ id: 4, name: "请假记录", pid: 2 },
				],
			},
			{ id: 3, name: "出差申请", pid: 1},
		]
    },
	{id: 5, name: "系统设置", pid: 0 ,
		children:[
			{ id: 6, name: "权限管理", pid: 5,
				children:[
					{ id: 7, name: "用户角色", pid: 6 },
					{ id: 8, name: "菜单设置", pid: 6 },
				]
			},
		]
	},
];

构建函数:


    function toTree(data) {
        // 删除 所有 children,以防止多次调用
        data.forEach(function (item) {
            delete item.children;
        });
 
        // 将数据存储为 以 id 为 KEY 的 map 索引数据列
        var map = {};
        data.forEach(function (item) {
            map[item.id] = item;
        });

        var val = [];
        data.forEach(function (item) {
            // 以当前遍历项,的pid,去map对象中找到索引的id
            var parent = map[item.pid];
            // 如果有parent,向parent元素中push该节点
            if (parent) {
                (parent.children || ( parent.children = [] )).push(item);
            } else {
                //如果没有在map中找到对应的索引ID,那么直接把 当前的item添加到 val结果集中,作为顶级
                val.push(item);
            }
        });
        return val;
    }

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值