js遞迴遍歷樹形json結構 根據最後一個節點找到整個家族,根據父節點找到所有的子節點,根據層級關係寫成樹形結構
阿新 • • 發佈:2018-11-13
dataTree: [ { id: 1, address: "安徽", pid: 0 }, { id: 6, address: "安徽a", pid: 1 }, { id: 12, address: "安徽aa", pid: 6 }, { id: 14, address: "安徽aaa", pid: 12 }, { id: 15, address: "安徽aaaa", pid: 14 }, { id: 7, address: "安徽b", pid: 1 }, { id: 13, address: "安徽bb", pid: 7 }, { id: 2, address: "江蘇", pid: 0 }, { id: 8, address: "江蘇a", pid: 2 }, { id: 9, address: "江蘇b", pid: 2 }, { id: 3, address: "合肥", pid: 0 }, { id: 10, address: "合肥a", pid: 3 }, { id: 11, address: "合肥b", pid: 3 } ]
定義好層級關係的陣列
//根據最後一個找到整個家族 familyTree(arr, pid) { var temp = []; var forFn = function(arr, pid) { for (var i = 0; i < arr.length; i++) { var item = arr[i]; if (item.id == pid) { temp.push(item); forFn(arr, item.pid); } } }; forFn(arr, pid); return temp; },
//找到某一父節點下的所有子節點 sonsTree(arr, id) { var temp = [], lev = 0; var forFn = function(arr, id, lev) { for (var i = 0; i < arr.length; i++) { var item = arr[i]; if (item.pid == id) { item.lev = lev; temp.push(item); forFn(arr, item.id, lev + 1); } } }; forFn(arr, id, lev); return temp; },
//將資料寫成樹結構
toTree(data) {
// 刪除 所有 children,以防止多次呼叫
data.forEach(function(item) {
delete item.children;
});
// 將資料儲存為 以 id 為 KEY 的 map 索引資料列
var map = {};
data.forEach(function(item) {
map[item.id] = item;
});
// console.log(map);
var val = [];
data.forEach(function(item) {
// 以當前遍歷項,的pid,去map物件中找到索引的id
var parent = map[item.pid];
// 如果找到索引,那麼說明此項不在頂級當中,那麼需要把此項新增到,他對應的父級中
if (parent) {
(parent.children || (parent.children = [])).push(item);
} else {
//如果沒有在map中找到對應的索引ID,那麼直接把 當前的item新增到 val結果集中,作為頂級
val.push(item);
}
});
return val;
},