js如何構(gòu)造elementUI樹(shù)狀菜單的數(shù)據(jù)結(jié)構(gòu)詳解
背景說(shuō)明
elementUI中自帶樹(shù)狀菜單,就是數(shù)據(jù)結(jié)構(gòu)有點(diǎn)復(fù)雜,偏向json風(fēng)格。
數(shù)據(jù)庫(kù)中菜單數(shù)據(jù)是二維表格,通過(guò)parentPk定義上下級(jí),是list型。
需要把list轉(zhuǎn)換成tree的結(jié)構(gòu)。
elementUI樹(shù)狀菜單的數(shù)據(jù)結(jié)構(gòu)
每個(gè)節(jié)點(diǎn)有4個(gè)屬性,id、label、newVal、children數(shù)組;
通過(guò)children數(shù)組包含關(guān)系標(biāo)示上下級(jí)。
var treeData={ id: 1, label: '一級(jí) 1', newVal: "", children: [{ id: 4, label: '二級(jí) 1-1', newVal: "", children: [{ id: 9, label: '三級(jí) 1-1-1', newVal: "", }, { id: 10, label: '三級(jí) 1-1-2', newVal: "", children:[{ id: 4444, label: '四級(jí) 1-1-1-4', newVal: "", }] }] },{ id:22, label:'二級(jí) 22', newVal:'' }] }
數(shù)據(jù)庫(kù)返回的list
var itemlist =[ {itemCode:'11', itemName:'材料11',itemType:'2',parentPk:'1'}, {itemCode:'111', itemName:'材料111',itemType:'3',parentPk:'11'}, {itemCode:'1111', itemName:'材料1111',itemType:'3',parentPk:'111'}, {itemCode:'1112', itemName:'材料1112',itemType:'3',parentPk:'111'} ]
設(shè)計(jì)思路
用遞歸方法;
- 從list中遍歷,找parentPk是當(dāng)前節(jié)點(diǎn)的id的對(duì)象,組裝成node,放到當(dāng)前節(jié)點(diǎn)的children數(shù)組;同時(shí),把list的對(duì)象刪除。
- 對(duì)新的node,遞歸執(zhí)行找子節(jié)點(diǎn)的過(guò)程。
- 退出條件:list為空或者循環(huán)list完畢。
具體代碼
//root節(jié)點(diǎn) 全局對(duì)象,因?yàn)椴煌倪f歸執(zhí)行,要訪問(wèn)的一個(gè)tree對(duì)象 var itemtree ={ id:'1', label:'物料名稱_整機(jī)', children:[] } //數(shù)據(jù)庫(kù)返回的菜單list 全局對(duì)象,因?yàn)椴煌倪f歸執(zhí)行,要訪問(wèn)的一個(gè)list對(duì)象 var itemlist =[ {itemCode:'11', itemName:'材料11',itemType:'2',parentPk:'1'}, {itemCode:'12', itemName:'材料12',itemType:'2',parentPk:'1'}, {itemCode:'111', itemName:'材料111',itemType:'3',parentPk:'11'}, {itemCode:'1111', itemName:'材料1111',itemType:'3',parentPk:'111'}, {itemCode:'1112', itemName:'材料1112',itemType:'3',parentPk:'111'} ] function buildtree(itemtreenode,itemlist){ if (itemlist.length===0) { console.log('條件結(jié)束') return } var j=0 /*??!注意循環(huán)變量j必須定義為局部變量,否則默認(rèn)全局變量,會(huì)導(dǎo)致子節(jié)點(diǎn)丟失*/ // var len=0 for(j=0,len=itemlist.length;j<len;j++){ console.log(new Date(),'j==>:',j,'len==>:',len,itemtreenode,itemlist) if (itemtreenode.id===itemlist[j].parentPk){ var node={id:itemlist[j].itemCode,label:itemlist[j].itemName,children:[]} itemtreenode.children.push(node) // itemlist.splice(j,1) /*!! 沒(méi)有刪除list元素,否則會(huì)導(dǎo)致后續(xù)引用錯(cuò)誤。代碼不是很完美,一時(shí)沒(méi)想到完美方法*/ buildtree(node,itemlist) } } console.log('循環(huán)結(jié)束') } console.log('begin') buildtree(itemtree,itemlist) console.log(itemtree)
代碼執(zhí)行結(jié)果
可以看到組裝樹(shù)是正確的。
總結(jié)
ps:和設(shè)計(jì)方案對(duì)比,代碼不是很完美,list中被引用的元素沒(méi)有成功移除;移除后,后邊會(huì)報(bào)錯(cuò)。暫時(shí)沒(méi)找到好方法,對(duì)性能有點(diǎn)影響。
樹(shù)data轉(zhuǎn)list代碼
與此相反的操作。
var treeData={ id: 1, label: '一級(jí) 1', newVal: "", children: [{ id: 4, label: '二級(jí) 1-1', newVal: "", children: [{ id: 9, label: '三級(jí) 1-1-1', newVal: "", }, { id: 10, label: '三級(jí) 1-1-2', newVal: "", children:[{ id: 4444, label: '四級(jí) 1-1-1-4', newVal: "", }] }] },{ id:22, label:'二級(jí) 22', newVal:'', children:[{id:'2-2-1',label:'三級(jí)221',newVal:'',children:[],}] }] } var exp=undefined var itemlist=[] function tree2list(itemnode){ if(typeof(itemnode)=="undefined"){ console.log('返回:',itemnode) return } if(itemnode.children && itemnode.children.length>0){ var i=0 for(i=0;i<itemnode.children.length;i++){ itemnode.children[i].parentPk=itemnode.id console.log(itemnode.children[i]) itemlist.push(itemnode.children[i]) this.tree2list(itemnode.children[i]) } } } console.log('begin') tree2list(treeData,itemlist) console.log(itemlist)
到此這篇關(guān)于js如何構(gòu)造elementUI樹(shù)狀菜單的數(shù)據(jù)結(jié)構(gòu)的文章就介紹到這了,更多相關(guān)js構(gòu)造elementUI樹(shù)狀菜單內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
- ?JavaScript?數(shù)據(jù)結(jié)構(gòu)之散列表的創(chuàng)建(1)
- JavaScript中的Map數(shù)據(jù)結(jié)構(gòu)詳解
- Go語(yǔ)言的數(shù)據(jù)結(jié)構(gòu)轉(zhuǎn)JSON
- JavaScript的Set數(shù)據(jù)結(jié)構(gòu)詳解
- JS使用reduce()方法處理樹(shù)形結(jié)構(gòu)數(shù)據(jù)
- 一組JS創(chuàng)建和操作表格的函數(shù)集合
- JavaScript?數(shù)據(jù)結(jié)構(gòu)之集合創(chuàng)建(1)
相關(guān)文章
JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng)
這篇文章主要為大家詳細(xì)介紹了JS實(shí)現(xiàn)省市縣三級(jí)下拉聯(lián)動(dòng),文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-04-04js獲取對(duì)象、數(shù)組的實(shí)際長(zhǎng)度,元素實(shí)際個(gè)數(shù)的實(shí)現(xiàn)代碼
下面小編就為大家?guī)?lái)一篇js獲取對(duì)象、數(shù)組的實(shí)際長(zhǎng)度,元素實(shí)際個(gè)數(shù)的實(shí)現(xiàn)代碼。小編覺(jué)得挺不錯(cuò)的,現(xiàn)在就分享 給大家,也給大家做個(gè)參考。一起跟隨小編過(guò)來(lái)看看吧2016-06-06JS實(shí)現(xiàn)類(lèi)似51job上的地區(qū)選擇效果示例
這篇文章主要介紹了JS實(shí)現(xiàn)類(lèi)似51job上的地區(qū)選擇效果,結(jié)合完整實(shí)例形式分析了javascript基于鼠標(biāo)事件響應(yīng)實(shí)現(xiàn)頁(yè)面元素動(dòng)態(tài)變換的相關(guān)操作技巧,需要的朋友可以參考下2016-11-11JAVASCRIPT代碼編寫(xiě)俄羅斯方塊網(wǎng)頁(yè)版
俄羅斯方塊方塊是小時(shí)候的一個(gè)回憶,從最開(kāi)始的掌上的黑白游戲機(jī),到電視游戲機(jī),到電腦,無(wú)不有它的痕跡,今天我們來(lái)一起重溫它的一種實(shí)現(xiàn)方法,也算是整理一下我的思路吧,感興趣的小伙伴一起學(xué)習(xí)吧2015-11-11JS Generator 函數(shù)的含義與用法實(shí)例總結(jié)
這篇文章主要介紹了JS Generator 函數(shù)的含義與用法,結(jié)合實(shí)例形式總結(jié)分析了JS Generator 函數(shù)基本含義、用法及操作注意事項(xiàng),需要的朋友可以參考下2020-04-04Javascript 定時(shí)器調(diào)用傳遞參數(shù)的方法
Javascript 定時(shí)器調(diào)用傳遞參數(shù)的方法,需要的朋友可以參考下。2009-11-11原生js實(shí)現(xiàn)淘寶首頁(yè)點(diǎn)擊按鈕緩慢回到頂部效果
本例將實(shí)現(xiàn)這樣的一個(gè)效果:下拉到一定距離后按鈕才顯示出來(lái),鼠標(biāo)放到按鈕上時(shí),按鈕背景會(huì)變成灰色,并且圖標(biāo)變成了文字。點(diǎn)擊按鈕緩慢回到頂部2014-04-04