背景說明

elementUI中自帶樹狀菜單，就是數(shù)據(jù)結(jié)構(gòu)有點(diǎn)復(fù)雜，偏向json風(fēng)格。

數(shù)據(jù)庫中菜單數(shù)據(jù)是二維表格，通過parentPk定義上下級(jí)，是list型。

需要把list轉(zhuǎn)換成tree的結(jié)構(gòu)。

elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)

每個(gè)節(jié)點(diǎn)有4個(gè)屬性，id、label、newVal、children數(shù)組；

通過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ù)庫返回的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)的過程。 退出條件：list為空或者循環(huán)list完畢。 具體代碼

//root節(jié)點(diǎn)全局對(duì)象，因?yàn)椴煌倪f歸執(zhí)行，要訪問的一個(gè)tree對(duì)象var itemtree ={ id:’1’, label:’物料名稱_整機(jī)’, children:[]}//數(shù)據(jù)庫返回的菜單list全局對(duì)象，因?yàn)椴煌倪f歸執(zhí)行，要訪問的一個(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) /*!! 沒有刪除list元素，否則會(huì)導(dǎo)致后續(xù)引用錯(cuò)誤。代碼不是很完美，一時(shí)沒想到完美方法*/ buildtree(node,itemlist)} } console.log(’循環(huán)結(jié)束’)}console.log(’begin’)buildtree(itemtree,itemlist) console.log(itemtree)代碼執(zhí)行結(jié)果

可以看到組裝樹是正確的。

總結(jié)

ps：和設(shè)計(jì)方案對(duì)比，代碼不是很完美，list中被引用的元素沒有成功移除；移除后，后邊會(huì)報(bào)錯(cuò)。暫時(shí)沒找到好方法，對(duì)性能有點(diǎn)影響。

樹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=undefinedvar 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ù)據(jù)結(jié)構(gòu)的文章就介紹到這了,更多相關(guān)js構(gòu)造elementUI樹狀菜單內(nèi)容請(qǐng)搜索好吧啦網(wǎng)以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持好吧啦網(wǎng)！