平時會經常遇到樹形結構的問題,比如顯示目錄結構等。
大多數情況下後臺會返回這樣的數據,如下:
[
{ id: 19, pid: 0, name:'nodejs' },
{ id: 20, pid: 19, name:'express' },
{ id: 21, pid: 19, name:'mongodb' },
{ id: 60, pid: 20, name:'ejs' },
{ id: 59, pid: 0, name:'前端開發' },
{ id: 70, pid: 59, name:'javascript' },
{ id: 71, pid: 59, name:'css' },
{ id: 72, pid: 59, name:'html' },
{ id: 73, pid: 59, name:'bootstrap' },
{ id: 61, pid: 0, name:'視覺設計' },
{ id: 63, pid: 61, name:'網頁設計' },
]
這種數據結構後臺容易處理,但是前臺不好處理,需要首先將其轉成樹形json數據,如下:
這樣就可以很方便的是用遞歸構建樹形的組件。
如果後臺能夠直接返回這種結構最好,不然前臺需要做轉換。
一、將list數組結構的數據轉成tree結構json
//list 轉成樹形json
function listToTree(list,pid) {
var ret = [];//一個存放結果的臨時數組
for(vari in list) {
if(list[i].pid == pid) {//如果當前項的父id等於要查找的父id,進行遞歸
list[i].children = listToTree(list, list[i].id);
ret.push(list[i]);//把當前項保存到臨時數組中
}
}
return ret;//遞歸結束後返回結果
}
var tree=listToTree(list,0);//調用函數,傳入要轉換的list數組,和樹中頂級元素的pid
console.log(tree);
二、根據tree結構json數據生成下拉框