生成帶孩子的js樹? ?層級(jí)樹
var data = [
{ id: 1, name: "辦公管理", pid: 0 },
{ id: 2, name: "請(qǐng)假申請(qǐng)", pid: 1 },
{ id: 3, name: "出差申請(qǐng)", pid: 1 },
{ id: 4, name: "請(qǐng)假記錄", pid: 2 },
{ id: 5, name: "系統(tǒng)設(shè)置", pid: 0 },
{ id: 6, name: "權(quán)限管理", pid: 5 },
{ id: 7, name: "用戶角色", pid: 6 },
{ id: 8, name: "菜單設(shè)置", pid: 6 },
];
function toTree(data) {
? ? ? ? // 刪除 所有 children,以防止多次調(diào)用
? ? ? ? data.forEach(function (item) {
? ? ? ? ? ? ?delete item.children;
? ? ? ? ?});
? ? ? ? // 將數(shù)據(jù)存儲(chǔ)為 以 id 為 KEY 的 map 索引數(shù)據(jù)列
? ? ? ? var map = {};
? ? ? ? data.forEach(function (item) {
//console.log(item);
? ? ? ? ? ? map[item.id] = item;
? ? ? ? });
? //? ? console.log(map);
? ? ? ? var val = [];
? ? ? ? data.forEach(function (item) {
? ? ? ? ? ? // 以當(dāng)前遍歷項(xiàng)，的pid,去map對(duì)象中找到索引的id
? ? ? ? ? ? var parent = map[item.pid];
//console.log(parent);
? ? ? ? ? ? // 好繞啊，如果找到索引，那么說明此項(xiàng)不在頂級(jí)當(dāng)中,那么需要把此項(xiàng)添加到，他對(duì)應(yīng)的父級(jí)中
? ? ? ? ? ?if (parent) {
? ? ? ? ? ? ? ? ?(parent.children || ( parent.children = [] )).push(item);
? ? ? ? ? ? ?} else {
? ? ? ? ? ? ? ? ?//如果沒有在map中找到對(duì)應(yīng)的索引ID,那么直接把 當(dāng)前的item添加到 val結(jié)果集中，作為頂級(jí)
? ? ? ? ? ? ? ? ?val.push(item);
? ? ? ? ? ? ?}
? ? ? ? });
? ? ? ? return val;
? ? }
? ? console.log(toTree(data))
function test() {
? ? ? const list = [
? ? ? ? { id: "123", parentId: "", children: [] },
? ? ? ? { id: "124", parentId: "123", children: [] },
? ? ? ? { id: "125", parentId: "124", children: [] },
? ? ? ? { id: "126", parentId: "125", children: [] },
? ? ? ? { id: "127", parentId: "126", children: [] }
? ? ? ];
? ? ? const mapList = [];
? ? ? const tree = [];
? ? ? list.forEach(item => {
? ? ? ? mapList[item.id] = item;
? ? ? });
? ? ? list.forEach(item => {
? ? ? ? const parentNode = mapList[item.parentId];
? ? ? ? if (!parentNode) {
if (!item.children) {
item.children = []
}
? ? ? ? ? tree.push(item);
? ? ? ? } else {
if (!parentNode.children) {
parentNode.children = []
}
? ? ? ? ? parentNode.children.push(item);
? ? ? ? }
? ? ? });
? ? ? console.log("tree", tree);
? ? }
test();
