• 设为首页
  • 点击收藏
  • 手机版
    手机扫一扫访问
    迪恩网络手机版
  • 关注官方公众号
    微信扫一扫关注
    公众号

js如何构造elementUI树状菜单的数据结构详解

原作者: [db:作者] 来自: [db:来源] 收藏 邀请

背景说明

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

设计思路

用递归方法;

  1. 从list中遍历,找parentPk是当前节点的id的对象,组装成node,放到当前节点的children数组;同时,把list的对象删除。
  2. 对新的node,递归执行找子节点的过程。
  3. 退出条件: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树状菜单内容请搜索极客世界以前的文章或继续浏览下面的相关文章希望大家以后多多支持极客世界!


鲜花

握手

雷人

路过

鸡蛋
该文章已有0人参与评论

请发表评论

全部评论

专题导读
上一篇:
Vue项目优化的一些实战策略发布时间:2022-02-05
下一篇:
JavaScript 如何实现同源通信发布时间:2022-02-05
热门推荐
热门话题
阅读排行榜

扫描微信二维码

查看手机版网站

随时了解更新最新资讯

139-2527-9053

在线客服(服务时间 9:00~18:00)

在线QQ客服
地址:深圳市南山区西丽大学城创智工业园
电邮:jeky_zhao#qq.com
移动电话:139-2527-9053

Powered by 互联科技 X3.4© 2001-2213 极客世界.|Sitemap