`

树形数据整合

    博客分类:
  • js
 
阅读更多
function getTreeS() {
      const time = new Date().getTime()
      treeS(treeData)
      const timeEnd = new Date().getTime()
      console.log((timeEnd - time) + 'ms')
      console.log(tree(treeData))
    }
                代码-

 

const treeData = [
      { id: 1, pid: 0, path: '/1'},
      { id: 2, pid: 1, path: '/2'},
      { id: 3, pid: 1, path: '/3'},
      { id: 4, pid: 1, path: '/4'},

      { id: 5, pid: 0, path: '/5'},
      { id: 6, pid: 5, path: '/6'},
      { id: 7, pid: 5, path: '/7'},
      { id: 8, pid: 6, path: '/8'},
      { id: 9, pid: 6, path: '/9'},
      { id: 10, pid: 7, path: '/10'},
      { id: 11, pid: 7, path: '/11'},
      { id: 12, pid: 8, path: '/12'},
      { id: 13, pid: 12, path: '/13'},
      { id: 14, pid: 13, path: '/14'},
      { id: 15, pid: 14, path: '/15'},

      { id: 16, pid: 0, path: '/16'},
      { id: 17, pid: 16, path: '/17'},
      { id: 18, pid: 16, path: '/18'},
      { id: 19, pid: 16, path: '/19'},
      { id: 20, pid: 16, path: '/20'}
    ]
                          代码二

 

function treeS(data, pid = 0){
      const newData = data.filter(function (item) {
        return item.pid === pid
      })
      data = data.filter(function (item) {
        return item.pid !== pid
      })
      for (let i = 0; i < newData.length; i++) {
        const rtData = treeS(data, newData[i].id)
        if (rtData && rtData.length > 0) {
          console.log(rtData)
          newData[i].children = []
          newData[i].children.push(rtData)
        }
      }
      return newData
    }
                       代码三

 

一。树形数据整合。

代码一::为时间测试代码。

代码二:为测试数据。

代码三: 为整合树形数据的方法。

性能:120条数据大约需要300ms-400ms左右。(如果有更好的方法,欢迎留言!)

 

二。主要使用技术。

      1。使用递归调用。

      2。使用 filter 方法用于过滤数组。

 

 

分享到:
评论

相关推荐

    excel树形字典,导入数据库

    "Excel树形字典,导入数据库"这个主题就聚焦于如何将结构化的Excel数据,特别是树形结构的数据,有效地整合到数据库系统中。 首先,我们需要理解什么是"树形字典"。在Excel中,树形字典通常指的是通过表格形式表示...

    基于ztree封装的Vue树形组件,轻松实现海量数据的高性能渲染.zip

    3. 数据准备:根据组件的预期格式,准备好树形数据结构。 4. 使用组件:在模板中插入组件标签,并通过props传递数据和配置项。 5. 监听事件:在组件方法中定义事件处理函数,响应用户的操作。 总之,这个"基于ztree...

    bootstrap树形下拉框 下拉框树形菜单

    Bootstrap Tree形下拉框是一种将传统的下拉菜单与树形结构结合的UI组件,它使得在有限的空间内展示层级关系的数据变得更加直观和易用。Bootstrap框架本身并不直接提供树形下拉框的功能,但可以通过引入第三方插件如`...

    树形表格 treetable 完整版 带演示demo例子

    总之,“树形表格treetable完整版”提供了一种高效且灵活的方式来处理和展示层次数据,配合其演示demo,开发者可以轻松地将这种功能整合到自己的项目中,提升数据展现的直观性和用户体验。通过二次开发,可以进一步...

    jquery整合dtree 动态加载树形结构,提高效率

    动态加载树形结构, 本人这段时间正巧要做一个省市县的树状结构图,公司之前用的dtree实现起来效率太低,半天打不开页面,于是考虑用jquery动态加载,通过网上查资料,学习别人的列子,现将本人所整理的树状结构...

    s2sh+freemarker+jquery+jquery-treeview 无限级树形菜单.rar

    在这个项目中,jquery-treeview将由后端传递的树形数据转换成用户友好的视觉表示。 具体到项目中的“Tree”文件,这可能包含的是HTML模板、CSS样式表以及JavaScript脚本,它们共同协作以呈现树形菜单。HTML模板可能...

    Grid Control中使用的树形控件

    在Grid Control中整合树形控件,可以使得用户在单个视图中浏览和操作多级数据,提高交互效率。 GridTreeCtrlDemo的相关源文件包括: 1. `GridTreeCtrlDemo.clw`:这是工程的工作空间文件,包含了项目设置和配置信息...

    树形结构记事本treepad

    除了文字信息,Treepad还可以链接到电脑上的其他文件,将其整合进树形结构中,实现对文件的分类和管理,提供了一种不同于传统文件系统的整理方式。 总的来说,Treepad以其独特的树形结构和丰富的功能,为信息管理和...

    jsp树形菜单

    在给定的资源中,我们看到一个基于JSP实现的树形菜单,它还整合了MySQL数据库,这表明它能够动态地从数据库中获取并展示数据。 首先,我们需要理解JSP(JavaServer Pages)的基本概念。JSP是Java的一种动态网页技术...

    VC 树形菜单与数据库结合的例子.rar

    这个"VC 树形菜单与数据库结合的例子"展示了如何将这两者有效地整合在一起,为用户提供直观且交互性强的界面。在这个例子中,我们主要关注的是如何使用MFC(Microsoft Foundation Classes)库来创建树形菜单,并通过...

    树形下拉列表框

    树形下拉列表框是一种交互式的用户界面组件,它结合了传统的下拉列表与树状结构的优点,使得用户在选择时能以层级的方式查看和选择数据。这种组件常见于需要展示具有层次关系的数据集合,例如组织结构、地区分类或者...

    树形菜单、用JS配合Struts1.2、Spring2。0、Ajax2.0的树形菜单

    在IT行业中,树形菜单是一种常见的用户界面元素,它用于以层次结构展示数据,使得用户能够清晰地理解和操作复杂的组织结构。在这个项目中,我们看到一个利用JavaScript、Struts1.2、Spring2.0以及Ajax2.0实现的树形...

    Jquery 树形菜单

    综上所述,这个项目可能是一个使用ASP.NET MVC架构开发的博客系统,其中整合了Jquery技术实现交互式的树形菜单导航。开发者可以研究项目源码,学习如何在MVC环境中集成jQuery,以及如何处理动态加载的数据来构建响应...

    EAS系统F7控件树形显示

    "EAS系统F7控件树形显示"这个主题涉及的是在EAS系统中,如何使用F7控件来实现数据的树形结构展示。F7控件是一种用户界面组件,它允许用户以层次结构的形式查看和操作数据,这样的布局常见于文件管理器、组织结构图或...

    html树形菜单

    HTML树形菜单是一种在网页上展示层次结构数据的交互式元素,常用于网站导航、文件目录展示或组织复杂信息。这种菜单通常具有可展开和折叠的节点,用户可以通过点击节点来展开或隐藏其子节点,以此来探索和操作多层次...

    Vue+Element UI 树形控件整合下拉功能菜单(tree + dropdown +input)

    这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用。 对于没有层级的数据,我们可以使用表格或卡片来展示。要展示或建立层级关系,就一定会...

    后台管理系统模板++树形

    6. **树形数据展示**:利用JavaScript库(如jQuery或更现代的React、Vue等)实现可交互的树形控件,支持节点展开、折叠、拖拽排序等操作。 7. **API接口**:可能预设了一些与后端交互的API,方便开发者对接自己的...

    树形控件和列表控件的结合

    这个项目的实践价值在于,它提供了一个实际的示例,让开发者学习如何在MFC中结合使用树形控件和列表控件,这对于构建具有复杂数据展示需求的应用程序非常有用。同时,它也展示了如何跨版本地管理代码,这对于维护和...

    Ajax+jsp+oracle实现动态树形菜单

    总结,这个项目展示了如何整合前端的Ajax技术和后端的JSP处理,结合Oracle数据库,实现动态树形菜单的功能。它涉及到Web开发中的数据交互、服务器端逻辑处理、数据库操作等多个重要环节,对于提升Web应用的交互性和...

Global site tag (gtag.js) - Google Analytics