快捷導(dǎo)航

js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)詳解

更新時間：2021年05月13日 12:10:05 作者：英雄史詩

由于業(yè)務(wù)需要，要求實現(xiàn)樹形菜單，且菜單數(shù)據(jù)由后臺返回，下面這篇文章主要給大家介紹了關(guān)于js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)的相關(guān)資料,需要的朋友可以參考下

背景說明

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

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

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

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

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

通過children數(shù)組包含關(guān)系標示上下級。

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:''
        }]
      }

數(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è)計思路

用遞歸方法；

從list中遍歷，找parentPk是當(dāng)前節(jié)點的id的對象，組裝成node，放到當(dāng)前節(jié)點的children數(shù)組；同時，把list的對象刪除。
對新的node，遞歸執(zhí)行找子節(jié)點的過程。
退出條件：list為空或者循環(huán)list完畢。

具體代碼

//root節(jié)點
全局對象，因為不同的遞歸執(zhí)行，要訪問的一個tree對象
var itemtree ={
    id:'1',
    label:'物料名稱_整機',
    children:[]
}

//數(shù)據(jù)庫返回的菜單list
全局對象，因為不同的遞歸執(zhí)行，要訪問的一個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('條件結(jié)束')
    return 
  }
  var j=0   /*！！注意循環(huán)變量j必須定義為局部變量，否則默認全局變量，會導(dǎo)致子節(jié)點丟失*/
//   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元素，否則會導(dǎo)致后續(xù)引用錯誤。代碼不是很完美，一時沒想到完美方法*/
      buildtree(node,itemlist)      
  }    
  
}
  console.log('循環(huán)結(jié)束')
}

console.log('begin')
buildtree(itemtree,itemlist)  
console.log(itemtree)

代碼執(zhí)行結(jié)果

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

總結(jié)

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

樹data轉(zhuǎn)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)

到此這篇關(guān)于js如何構(gòu)造elementUI樹狀菜單的數(shù)據(jù)結(jié)構(gòu)的文章就介紹到這了,更多相關(guān)js構(gòu)造elementUI樹狀菜單內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: