資訊專欄INFORMATION COLUMN
摘要：引言最近接手一個項目中很多地方需要用到樹形結(jié)構(gòu)表格等，因此自己封了個的樹和表格組件，需要經(jīng)常對兩種形式的數(shù)據(jù)進行相互轉(zhuǎn)換，這里記錄下轉(zhuǎn)換的方法，組件等有時間再完善下也發(fā)上來。
引言
最近接手一個項目中很多地方需要用到樹形結(jié)構(gòu)表格等，因此自己封了個VUE的樹和表格組件，需要經(jīng)常對兩種形式的數(shù)據(jù)進行相互轉(zhuǎn)換，這里記錄下轉(zhuǎn)換的方法，組件等有時間再完善下也發(fā)上來。
扁平數(shù)組轉(zhuǎn)換為樹形結(jié)構(gòu)這個是最常用的，當我們從后臺獲取一個扁平數(shù)組的時候，通常比如用id、pid來標識父子關(guān)系，如：
var arr = [{id: 1, pid: "-1"},{id: 11, pid: "1"},{id: 12, pid: "1"}]
用map記錄的方法是最常用效果也最好的復(fù)雜度是O(nlgn),支持多個根節(jié)點:
function listToTree(list) {
var map = {}, node, tree= [], i;
for (i = 0; i < list.length; i ++) {
map[list[i].id] = list[i];
list[i].children = [];
}
for (i = 0; i < list.length; i += 1) {
node = list[i];
if (node.pid !== "-1") {
map[node.pid].children.push(node);
} else {
tree.push(node);
}
}
return tree;
}
listToTree(arr); //[{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[]},{"id":12,"pid":"1","children":[]}]}]
但是項目中有個需求，在后臺沒有返回給帶層級信息level的時候，需要用到層級信息，這樣轉(zhuǎn)換沒法計算出層級，因此就需要用迭代的方法了，默認根節(jié)點層級為0，依次遞增：
function listToTreeWithLevel(list, parent, level) {
var out = []
for (var node of list) {
if (node.pid == parent) {
node.level = level;
var children = listToTreeWithLevel(list, node.id, level + 1)
if (children.length) {
node.children = children
}
out.push(node)
}
}
return out
}
listToTreeWithLevel(arr, "-1", 0) //[{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[],"level":1},{"id":12,"pid":"1","children":[],"level":1}],"level":0}]
樹形結(jié)構(gòu)轉(zhuǎn)換為扁平數(shù)組
這個其實就是數(shù)據(jù)結(jié)構(gòu)中的廣度優(yōu)先遍歷：
function treeToList(tree) {
var queen = [];
var out = [];
queen = queen.concat(tree);
while(queen.length) {
var first = queen.shift();
if (first.children) {
queen = queen.concat(first.children)
delete first["children"];
}
out.push(first);
}
return out;
}
var tree = [{"id":1,"pid":"-1","children":[{"id":11,"pid":"1","children":[]},{"id":12,"pid":"1","children":[]}]}];
treeToList(tree) //[{"id":1,"pid":"-1"},{"id":11,"pid":"1"},{"id":12,"pid":"1"}]
參考資料
listtotree
找本數(shù)據(jù)結(jié)構(gòu)看看dfs和bfs
文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。
轉(zhuǎn)載請注明本文地址：http://www.ezyhdfw.cn/yun/99604.html
摘要：前言在工作中我們往往可能會遇到無限級別的分類等等的需求，往往后端返回的數(shù)據(jù)結(jié)構(gòu)可能不是我們想要的數(shù)據(jù)結(jié)構(gòu)，所以我們來看怎么進行處理扁平數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為樹型結(jié)構(gòu)解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪解憂雜貨鋪前言 在工作中我們往往可能會遇到無限級別的分類等等的需求，往往后端返回的數(shù)據(jù)結(jié)構(gòu)可能不是我們想要的數(shù)據(jù)結(jié)構(gòu)，所以我們來看怎么進行處理 扁平數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)換為JSON樹型結(jié)構(gòu) [ ...
摘要：但實際上就是在上點擊時對其子集進行隱藏或顯示通過縮進的距離來表現(xiàn)層級關(guān)系在代碼里很東西其實都是偽裝出來的，例如我們要實現(xiàn)的這個可無限折疊的。 前言 如何在table上實現(xiàn)一個可折疊展開子節(jié)點的table？先看下最終實現(xiàn)效果圖： showImg(https://segmentfault.com/img/remote/1460000017033990?w=758&h=453); 其實這個項...
摘要：樹形控件數(shù)據(jù)格式組件最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 vue+element tree(樹形控件數(shù)據(jù)格式)組件(1), 最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 首先說說需求，就是點擊出現(xiàn)彈窗+蒙板...
摘要：樹形控件數(shù)據(jù)格式組件最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 vue+element tree(樹形控件數(shù)據(jù)格式)組件(1), 最近做了第一個組內(nèi)可以使用的組件，雖然是最簡版，也廢了不少力。各位前輩幫我解決問題，才勉強搞定。讓我來記錄這個樹形組件的編寫過程和期間用到的知識點。 首先說說需求，就是點擊出現(xiàn)彈窗+蒙板...
閱讀 3650·2021-09-27 13:35
閱讀 3621·2019-08-29 17:09
閱讀 2516·2019-08-26 11:30
閱讀 760·2019-08-26 10:32
閱讀 609·2019-08-26 10:23
閱讀 1264·2019-08-26 10:20
閱讀 3219·2019-08-23 15:26
閱讀 3686·2019-08-23 14:33
