热门标签 | HotTags
当前位置:  开发笔记 > 前端 > 正文

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

由于业务需要,要求实现树形菜单,且菜单数据由后台返回,下面这篇文章主要给大家介绍了关于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:',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

到此这篇关于js如何构造elementUI树状菜单的数据结构的文章就介绍到这了,更多相关js构造elementUI树状菜单内容请搜索以前的文章或继续浏览下面的相关文章希望大家以后多多支持!


推荐阅读
  • 在macOS环境下使用Electron Builder进行应用打包时遇到签名验证失败的问题,具体表现为签名后spctl命令检测到应用程序未通过公证(Notarization)。本文将详细探讨该问题的原因及解决方案。 ... [详细]
  • 本文详细记录了在基于Debian的Deepin 20操作系统上安装MySQL 5.7的具体步骤,包括软件包的选择、依赖项的处理及远程访问权限的配置。 ... [详细]
  • 本文总结了在使用Ionic 5进行Android平台APK打包时遇到的问题,特别是针对QRScanner插件的改造。通过详细分析和提供具体的解决方法,帮助开发者顺利打包并优化应用性能。 ... [详细]
  • 本文探讨了在 PHP 中处理 JSON 编码时中文字符显示为 Unicode 转义序列的问题,并提供了多种有效的解决方法,包括使用正则表达式替换、URL 编码以及利用 PHP 5.4 及以上版本提供的 JSON_UNESCAPED_UNICODE 选项。 ... [详细]
  • 本文探讨了如何在编程中正确处理包含空数组的 JSON 对象,提供了详细的代码示例和解决方案。 ... [详细]
  • 本文介绍如何使用阿里云的fastjson库解析包含时间戳、IP地址和参数等信息的JSON格式文本,并进行数据处理和保存。 ... [详细]
  • 本文详细介绍了中央电视台电影频道的节目预告,并通过专业工具分析了其加载方式,确保用户能够获取最准确的电视节目信息。 ... [详细]
  • Composer Registry Manager:PHP的源切换管理工具
    本文介绍了一个用于Composer的源切换管理工具——Composer Registry Manager。该项目旨在简化Composer包源的管理和切换,避免与常见的CRM系统混淆,并提供了详细的安装和使用指南。 ... [详细]
  • 本文详细介绍了Git分布式版本控制系统中远程仓库的概念和操作方法。通过具体案例,帮助读者更好地理解和掌握如何高效管理代码库。 ... [详细]
  • 最近团队在部署DLP,作为一个技术人员对于黑盒看不到的地方还是充满了好奇心。多次咨询乙方人员DLP的算法原理是什么,他们都以商业秘密为由避而不谈,不得已只能自己查资料学习,于是有了下面的浅见。身为甲方,虽然不需要开发DLP产品,但是也有必要弄明白DLP基本的原理。俗话说工欲善其事必先利其器,只有在懂这个工具的原理之后才能更加灵活地使用这个工具,即使出现意外情况也能快速排错,越接近底层,越接近真相。根据DLP的实际用途,本文将DLP检测分为2部分,泄露关键字检测和近似重复文档检测。 ... [详细]
  • 本文介绍了如何利用npm脚本和concurrently工具,实现本地开发环境中多个监听服务的同时启动,包括HTTP服务、自动刷新、Sass和ES6支持。 ... [详细]
  • 本文探讨了在通过 API 端点调用时,使用猫鼬(Mongoose)的 findOne 方法总是返回 null 的问题,并提供了详细的解决方案和建议。 ... [详细]
  • 本文详细介绍如何在VSCode中配置自定义代码片段,使其具备与IDEA相似的代码生成快捷键功能。通过具体的Java和HTML代码片段示例,展示配置步骤及效果。 ... [详细]
  • 在网页开发中,页面加载速度是一个关键的用户体验因素。为了提升加载效率,避免在PageLoad事件中进行大量数据绑定操作,可以采用异步加载和特定控件来优化页面加载过程。 ... [详细]
  • 探讨在循环中调用$.post()时,回调函数为何会在循环结束后才开始执行,并提供解决方案和优化建议。 ... [详细]
author-avatar
WE艺家人-千乐
这个家伙很懒,什么也没留下!
PHP1.CN | 中国最专业的PHP中文社区 | DevBox开发工具箱 | json解析格式化 |PHP资讯 | PHP教程 | 数据库技术 | 服务器技术 | 前端开发技术 | PHP框架 | 开发工具 | 在线工具
Copyright © 1998 - 2020 PHP1.CN. All Rights Reserved | 京公网安备 11010802041100号 | 京ICP备19059560号-4 | PHP1.CN 第一PHP社区 版权所有