`

树形数据整合

    博客分类:
  • 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 方法用于过滤数组。

 

 

分享到:
评论

相关推荐

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

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

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

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

    阿赛树形论坛系统 AsaiSXBBS V5.rar

    28、论坛和用户数据分离,方便大家整合其他用户网站系统; 29、可以自由修改论坛、用户、数据库的文件夹所在地,而不影响系统运行,增加论坛的安全性; ——V5新增功能—— 30、更新编辑器为阿赛经典HTML编辑器,...

    Struts2 + Jmesa (表格插件) + Ztree (树形插件) 小例子

    整合的 Struts2 + Jmesa (表格插件) + Ztree (树形插件) 的小例子 里边带齐了 jar包 部署上直接运行 其中数据都是固定数据 没有连接数据库~~~ 共同学习~~

    Java实现的树以及包含树的内存缓存框架

    java.util竟然没有提供树(数据结构)的实现!让我这种拿来主义的懒人很不开心。 随手写了一个TreeNode,顺道实现了个对应的内存缓存框架,适用于数据量不大,更新也少但是反复要读的数据,比如模块信息/组织结构/...

    数据结构与算法相关的知识点整合.zip

    逻辑结构:描述数据元素之间的逻辑关系,如线性结构(如数组、链表)、树形结构(如二叉树、堆、B树)、图结构(有向图、无向图等)以及集合和队列等抽象数据类型。 存储结构(物理结构):描述数据在计算机中如何...

    Java web项目源码整合开发ssm 企业办公自动化系统 可用于毕设参考 (内附源码+使用说明)

    (2)登录成功后,进入系统首页,在树形菜单中为用户提供了“日常管理”、“考勤管理”、“员工管理”等内容。 (3)如果用户提交的审核内容,没有通过管理员的审核,可以修改,审核通过后不可修改。

    js无限级分类递归

    修改之前的源码均来自网上,本人只是对当前做了整合和修改。当前你所有的记录中需要包含id和parentId,也就是有父子关系即可。你的数据源必须是一维的json数组。zNodes=[ {id:1,pId:0,name:"AAA"}, {id:11,pId...

    后台管理系统+springBoot+Jpa+JWT+Redis+Vue

    部门管理:可配置系统组织架构,树形表格展示 岗位管理:配置各个部门的职位 字典管理:可维护常用一些固定的数据,如:状态,性别等 系统日志:记录用户操作日志与异常日志,方便开发人员定位排错 SQL监控:采用...

    ZTree+frameset+myibatis+struts2+spring整合主页面

    使用ZTree+jquery+myibatis+struts2+spring做的一个系统主页面, 包括树形菜单. 按照PLATFORM\src\system\database\script/script.sql可进行数据的导入。

    基于SSHI架构的开发平台技术方案

    包括:表格控件,树形菜单,树形表格,弹出框,对话框,选项卡,日期组件、日历组件、图表组件、报表组件、表单验证框架等 平台集成系统管理模块,包括:(1)服务器系统信息监控 (2)组织机构管理 (3)用户管理 (4)角色...

    javaweb芝麻开门博客网源码

    该项目是一个标准的个人博客网站,支持文章发表、标签管理、分类管理、评论等功能。...9. 日期控件、树形控件、富文本编辑器等插件开发与整合。 10. EasyUI数据表格、树形菜单、弹出窗口等开发。 11.

    javaweb讯友网络相册源码

    该项目是一套网络相册...7. 日期选择器、树形控件、富文本编辑器等插件开发与整合。 8. EasyUI数据表格、树形菜单、弹出窗口等开发。 9. Dubbo+Zookeeper服务治理方案使用。 10. Quartz定时任务,实现网站访问量统计、

    smart GWT 3.1

    比如可 编辑的树形表格、查询常用的过滤器创建器和类似 Google Calendar 的日历等 等。 内置的数据整合功能。利用 SmartClient 的 MVC 模式,用户可以通过定义 数据源(Data Source),很容易地开发出能对服务器端...

    ExtJs4.1+Jbpm4+SSH2+Oracle10g实际项目源码

    树形讲解(一棵转出与ExtJs交互的树,树形的效率问题) 不采用自关联(慢) ExtJs 多MVC动态加载的机制实现 业务数据通用的增删改查 JBPM方面: 部署流程管理 流程挂接管理(配置此流程需要的特性,委托管理和...

    基于SringBoot+Vue脚手架,前后端分离的管理系统框架

    基于RBAC的权限模型(可分配角色和菜单...树形表格(数据可作为树形菜单使用) JWT权限 后端1对多查询 批量删除 百度地图 在线聊天室 在线留言 个人头像 整合Echarts图表 支付宝沙箱支付 SpringSecurity密码加密验证

    【NGOOS极益开源公益平台 v2.2】公益组织CMS平台+支持在线捐赠+整合Bootstrap响应式设计

    树形网站结构 30种网站内容元素 栏目自定,布局自选 不能再强大的模板系统 丰富而精确的权限管理 回收站功能 无限编辑历史撤销恢复 扩展管理器 全库检索 清除全站缓存 生产与开发模式,生产模式开启后,速度飞快。 ...

    Extjs4+jbpm4+SSH+oracle.zip

    树形讲解(一棵转出与ExtJs交互的树,树形的效率问题) 不采用自关联(慢) ExtJs 多MVC动态加载的机制实现 业务数据通用的增删改查 JBPM方面: 部署流程管理 流程挂接管理(配置此流程需要的特性,委托管理和...

    Spring MVC4.3.5+MyBatis3.4.2+Apache Shiro1.3.2整合开发高仿小米商城的后台用户管理系统

    树形视图插件:Ztree 后台管理系统模版:H+ 电子商城系统模版:小米官网 部署: 1、具备运行环境:JDK1.7+、Maven3.0+、MySql5+ 2、根据mi-cms\src\main\resources\properties\jdbc.properties 配置数据库 3、先...

Global site tag (gtag.js) - Google Analytics