js如何構造elementUI樹狀菜單的數據結構詳解
背景說明
elementUI中自帶樹狀菜單,就是數據結構有點復雜,偏向json風格。
數據庫中菜單數據是二維表格,通過parentPk定義上下級,是list型。
需要把list轉換成tree的結構。
elementUI樹狀菜單的數據結構
每個節點有4個屬性,id、label、newVal、children數組;
通過children數組包含關系標示上下級。
var treeData={ id: 1, label: '一級 1', newVal: "", children: [{ id: 4, label: '二級 1-1', newVal: "", children: [{ id: 9, label: '三級 1-1-1', newVal: "", }, { id: 10, label: '三級 1-1-2', newVal: "", children:[{ id: 4444, label: '四級 1-1-1-4', newVal: "", }] }] },{ id:22, label:'二級 22', newVal:'' }] }
數據庫返回的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'} ]
設計思路
用遞歸方法;
- 從list中遍歷,找parentPk是當前節點的id的對象,組裝成node,放到當前節點的children數組;同時,把list的對象刪除。
- 對新的node,遞歸執行找子節點的過程。
- 退出條件:list為空或者循環list完畢。
具體代碼
//root節點 全局對象,因為不同的遞歸執行,要訪問的一個tree對象 var itemtree ={ id:'1', label:'物料名稱_整機', children:[] } //數據庫返回的菜單list 全局對象,因為不同的遞歸執行,要訪問的一個list對象 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('條件結束') return } var j=0 /*!!註意循環變量j必須定義為局部變量,否則默認全局變量,會導致子節點丟失*/ // 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元素,否則會導致後續引用錯誤。代碼不是很完美,一時沒想到完美方法*/ buildtree(node,itemlist) } } console.log('循環結束') } console.log('begin') buildtree(itemtree,itemlist) console.log(itemtree)
代碼執行結果
可以看到組裝樹是正確的。
總結
ps:和設計方案對比,代碼不是很完美,list中被引用的元素沒有成功移除;移除後,後邊會報錯。暫時沒找到好方法,對性能有點影響。
樹data轉list代碼
與此相反的操作。
var treeData={ id: 1, label: '一級 1', newVal: "", children: [{ id: 4, label: '二級 1-1', newVal: "", children: [{ id: 9, label: '三級 1-1-1', newVal: "", }, { id: 10, label: '三級 1-1-2', newVal: "", children:[{ id: 4444, label: '四級 1-1-1-4', newVal: "", }] }] },{ id:22, label:'二級 22', newVal:'', children:[{id:'2-2-1',label:'三級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)
到此這篇關於js如何構造elementUI樹狀菜單的數據結構的文章就介紹到這瞭,更多相關js構造elementUI樹狀菜單內容請搜索WalkonNet以前的文章或繼續瀏覽下面的相關文章希望大傢以後多多支持WalkonNet!
推薦閱讀:
- Vue組件庫ElementUI實現表格加載樹形數據教程
- JS樹形結構根據id獲取父級節點元素的示例代碼
- vue深度優先遍歷多層數組對象方式(相當於多棵樹、三級樹)
- elementUI實現級聯選擇器
- Vue Element-ui實現樹形控件節點添加圖標詳解