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

设计思路

用递归方法;

  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)

相关推荐

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

    背景说明 elementUI中自带树状菜单,就是数据结构有点复杂,偏向json风格. 数据库中菜单数据是二维表格,通过parentPk定义上下级,是list型. 需要把list转换成tree的结构. elementUI树状菜单的数据结构 每个节点有4个属性,id.label.newVal.children数组: 通过children数组包含关系标示上下级. var treeData={ id: 1, label: '一级 1', newVal: "", children: [{ id:

  • C语言树状数组的实例详解

    C语言树状数组的实例详解 最近学了树状数组,给我的感觉就是 这个数据结构好神奇啊^_^ 首先她的常数比线段树小,其次她的实现复杂度也远低于线段树 (并没有黑线段树的意思=-=) 所以熟练掌握她是非常有必要的.. 关于树状数组的基础知识与原理网上一搜一大堆,我就不赘述了,就谈一些树状数组的应用好了 1,单点修改,求区间和 #define lowbit(x) (x&-x) // 设 x 的末尾零的个数为 y , 则 lowbit(x) == 2^y void Update(int i,int v)

  • dtree 网页树状菜单及传递对象集合到js内,动态生成节点

    在winform端,树状菜单是非常有用的,实现这个是非常便捷的,所以我想到在页面放入一个树状菜单的.我选择了dtree这个工具,网络上还有很多方法实现页面树状菜单的,不过我觉得这个比较好用的,而且配置比较简单,运用上上手很快.dtree是纯js的,所以不用导入jar包,并且配置只要在js内配置就好了.而且现在网络上有很多高手修改后的改良版,加了checkbox,更加方便.在开发过程中,最难的就是数据的交互的,因为dtree是纯js的,所以不存在和后台交互的方法,我的办法是先通过后台交互,将数据传

  • jQuery实现自定义右键菜单的树状菜单效果

    本文实例讲述了jQuery实现自定义右键菜单的树状菜单效果.分享给大家供大家参考.具体如下: 这是一款基于jQuery的自定义右键菜单,在树状结构的子节点(下级没有节点)上单击右键才会弹出自定义菜单,而且菜单是自动根据鼠标位置来定位的.当鼠标在菜单以外的任意空白处单击一下后会自动消失.这里想特别说明一点所谓的"菜单以外",可以有两种解剖方式--1.除了鼠标在菜单区域内的所有位置:2.如下图所示的A.B.C.D四个区域.显然用第一种方法来剖析会更简单直接一点.源码中的!IsInArea就

  • Spring Boot + Mybatis Plus实现树状菜单的方法

    1.实体类中添加子菜单列表或集合 @TableField(exist = false) private Set<SysMenu> childrenList = new HashSet<>(); 2.定义一个方法递归的获取子菜单 public SysMenu getChildrenList(SysMenu sysMenu, List<SysMenu> sysMenuList) { for (SysMenu menu : sysMenuList) { if (menu.ge

  • 基于Web标准的UI组件 — 树状菜单(2)

    从这篇开始,你需要拥有一些Javascript和DOM相关的知识才能顺利地学习下去.由于Javascript和DOM都不是三言两语可以说完的东西,如果你对它们还不熟悉,请先到这里学习一下再继续:Javascript在线教程(英文).DOM在线教程(英文). getElementsByClassName() 为了从一大堆HTML代码中找出我们的树状菜单(也许有多个),我们先来实现一个通过className找DOM节点的方法:getElementsByClassName.这是对浏览器自有DOM方法的

  • JS实现简单的选择题测评系统代码思路详解(demo)

    包含内容:JS封装表单,JS校验表单 说是测评系统,感觉只能算是一个小小的Demo,很水,,没有数据库库,,仅使用JS做简单的选择题测评系统 -------------------------------------------------------------------------------- 一.设计思路 表单封装: [1]由于采用JS封装提交所以,不需要form标签 [2]放置多个input标签,作为输入项 [3]编写JS获取输入项,并通过get方式提交到另一个页面 校验表单(显示结

  • jQuery EasyUI菜单与按钮详解

    EasyUI 简介 easyui是一种基于jQuery的用户界面插件集合. easyui为创建现代化,互动,JavaScript应用程序,提供必要的功能. 使用easyui你不需要写很多代码,你只需要通过编写一些简单HTML标记,就可以定义用户界面. easyui是个完美支持HTML5网页的完整框架. easyui节省您网页开发的时间和规模. easyui很简单但功能强大的. 代码如下: <html> <head> <meta http-equiv="Content

  • vue.js的状态管理vuex中store的使用详解

    一.状态管理(vuex)简介 vuex是专为vue.js应用程序开发的状态管理模式.它采用集中存储管理应用的所有组件的状态,并以相应的规则保证状态以一种可预测的方式发生变化.vuex也集成刀vue的官方调试工具devtools extension,提供了诸如零配置的time-travel调试.状态快照导入导出等高级调试功能. 二.状态管理核心 状态管理有5个核心,分别是state.getter.mutation.action以及module.分别简单的介绍一下它们: 1.state state为

  • JS手写bind之处理new的情况详解

    目录 new 判断函数是否通过 new 被调用 new 和 bind 实现完整的 bind 结尾 大家好,我是前端西瓜哥. 之前写了一篇关于 JS 中 bind 方法的实现的文章,并给出了实现: Function.prototype.myBind = function(thisArg, ...prefixArgs) { const fn = this; return function(...args) { return fn.call(thisArg, ...prefixArgs, ...arg

随机推荐