javascript將list轉(zhuǎn)換成樹(shù)狀結(jié)構(gòu)的實(shí)例
如下所示:
/**
* 將list裝換成tree
* @param {Object} myId 數(shù)據(jù)主鍵id
* @param {Object} pId 數(shù)據(jù)關(guān)聯(lián)的父級(jí)id
* @param {Object} list list集合
*/
function listToTree(myId,pId,list){
function exists(list, parentId){
for(var i=0; i<list.length; i++){
if (list[i][myId] == parentId) return true;
}
return false;
}
var nodes = [];
// get the top level nodes
for(var i=0; i<list.length; i++){
var row = list[i];
if (!exists(list, row[pId])){
nodes.push(row);
}
}
var toDo = [];
for(var i=0; i<nodes.length; i++){
toDo.push(nodes[i]);
}
while(toDo.length){
var node = toDo.shift(); // the parent node
// get the children nodes
for(var i=0; i<list.length; i++){
var row = list[i];
if (row[pId] == node[myId]){
//var child = {id:row.id,text:row.name};
if (node.children){
node.children.push(row);
} else {
node.children = [row];
}
toDo.push(row);
}
}
}
return nodes;
}
var list=[
{"ids":1,"parendId":0,"name":"Foods",url:"wwww"},
{"ids":2,"parentId":1,"name":"Fruits"},
{"ids":3,"parentId":1,"name":"Vegetables"},
{"ids":4,"parentId":2,"name":"apple"},
{"ids":5,"parentId":2,"name":"orange"},
{"ids":6,"parentId":3,"name":"tomato"},
{"ids":7,"parentId":3,"name":"carrot"},
{"ids":8,"parentId":3,"name":"cabbage"},
{"ids":9,"parentId":3,"name":"potato"},
{"ids":10,"parentId":3,"name":"lettuce"},
{"ids":11,"parendId":0,"name":"Foods"},
{"ids":12,"parentId":11,"name":"Fruits"},
{"ids":13,"parentId":11,"name":"Vegetables"},
{"ids":14,"parentId":12,"name":"apple"},
{"ids":15,"parentId":12,"name":"orange"},
{"ids":16,"parentId":13,"name":"tomato"},
{"ids":17,"parentId":13,"name":"carrot"},
{"ids":18,"parentId":13,"name":"cabbage"},
{"ids":19,"parentId":13,"name":"potato"},
{"ids":20,"parentId":13,"name":"lettuce"}
];
console.log(JSON.stringify(listToTree("ids","parentId",list)));
console.log(listToTree("ids","parentId",list));
以上這篇javascript將list轉(zhuǎn)換成樹(shù)狀結(jié)構(gòu)的實(shí)例就是小編分享給大家的全部?jī)?nèi)容了,希望能給大家一個(gè)參考,也希望大家多多支持腳本之家。
相關(guān)文章
javascript實(shí)現(xiàn)畫(huà)不相交的圓
這篇文章主要介紹了javascript實(shí)現(xiàn)畫(huà)不相交的圓,這個(gè)也是阿里巴巴的筆試題,只不過(guò)忘記當(dāng)時(shí)是不是要求必須用canvas來(lái)實(shí)現(xiàn),下篇文章再寫(xiě)吧。2015-04-04
原生js實(shí)現(xiàn)查找/添加/刪除/指定元素的class
查找、添加、刪除、指定元素的class使用原生js實(shí)現(xiàn)不可思議吧,感興趣的朋友可以參考下哈,希望可以幫助到你2013-04-04
uniapp微信小程序訂閱消息發(fā)送服務(wù)通知超詳細(xì)教程
在使用或開(kāi)發(fā)小程序過(guò)程中,我們會(huì)發(fā)現(xiàn)消息通知是非常重要的一個(gè)環(huán)節(jié),下面這篇文章主要給大家介紹了關(guān)于uniapp微信小程序訂閱消息發(fā)送服務(wù)通知的相關(guān)資料,需要的朋友可以參考下2023-06-06
js實(shí)現(xiàn)三角形粒子運(yùn)動(dòng)
這篇文章主要為大家詳細(xì)介紹了js實(shí)現(xiàn)三角形粒子運(yùn)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-09-09
JavaScript實(shí)現(xiàn)重置表單(reset)的方法
這篇文章主要介紹了JavaScript實(shí)現(xiàn)重置表單(reset)的方法,涉及javascript中reset()方法的使用技巧,具有一定參考借鑒價(jià)值,需要的朋友可以參考下2015-04-04
JS實(shí)現(xiàn)簡(jiǎn)單表格排序操作示例
這篇文章主要介紹了JS實(shí)現(xiàn)簡(jiǎn)單表格排序操作,結(jié)合具體實(shí)例形式分析了JavaScript事件響應(yīng)及table表格動(dòng)態(tài)操作相關(guān)技巧,需要的朋友可以參考下2017-10-10
記錄微信小程序 height: calc(xx - xx);無(wú)效問(wèn)題
這篇文章主要介紹了微信小程序 - height: calc(xx - xx);無(wú)效 問(wèn)題,文中給大家擴(kuò)展介紹下jquery點(diǎn)擊添加樣式,再次點(diǎn)擊移除樣式的實(shí)例代碼,需要的朋友可以參考下2019-12-12

