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中,树形字典通常指的是通过表格形式表示...
3. 数据准备:根据组件的预期格式,准备好树形数据结构。 4. 使用组件:在模板中插入组件标签,并通过props传递数据和配置项。 5. 监听事件:在组件方法中定义事件处理函数,响应用户的操作。 总之,这个"基于ztree...
Bootstrap Tree形下拉框是一种将传统的下拉菜单与树形结构结合的UI组件,它使得在有限的空间内展示层级关系的数据变得更加直观和易用。Bootstrap框架本身并不直接提供树形下拉框的功能,但可以通过引入第三方插件如`...
总之,“树形表格treetable完整版”提供了一种高效且灵活的方式来处理和展示层次数据,配合其演示demo,开发者可以轻松地将这种功能整合到自己的项目中,提升数据展现的直观性和用户体验。通过二次开发,可以进一步...
动态加载树形结构, 本人这段时间正巧要做一个省市县的树状结构图,公司之前用的dtree实现起来效率太低,半天打不开页面,于是考虑用jquery动态加载,通过网上查资料,学习别人的列子,现将本人所整理的树状结构...
在Grid Control中整合树形控件,可以使得用户在单个视图中浏览和操作多级数据,提高交互效率。 GridTreeCtrlDemo的相关源文件包括: 1. `GridTreeCtrlDemo.clw`:这是工程的工作空间文件,包含了项目设置和配置信息...
在这个项目中,jquery-treeview将由后端传递的树形数据转换成用户友好的视觉表示。 具体到项目中的“Tree”文件,这可能包含的是HTML模板、CSS样式表以及JavaScript脚本,它们共同协作以呈现树形菜单。HTML模板可能...
除了文字信息,Treepad还可以链接到电脑上的其他文件,将其整合进树形结构中,实现对文件的分类和管理,提供了一种不同于传统文件系统的整理方式。 总的来说,Treepad以其独特的树形结构和丰富的功能,为信息管理和...
在给定的资源中,我们看到一个基于JSP实现的树形菜单,它还整合了MySQL数据库,这表明它能够动态地从数据库中获取并展示数据。 首先,我们需要理解JSP(JavaServer Pages)的基本概念。JSP是Java的一种动态网页技术...
这个"VC 树形菜单与数据库结合的例子"展示了如何将这两者有效地整合在一起,为用户提供直观且交互性强的界面。在这个例子中,我们主要关注的是如何使用MFC(Microsoft Foundation Classes)库来创建树形菜单,并通过...
树形下拉列表框是一种交互式的用户界面组件,它结合了传统的下拉列表与树状结构的优点,使得用户在选择时能以层级的方式查看和选择数据。这种组件常见于需要展示具有层次关系的数据集合,例如组织结构、地区分类或者...
在IT行业中,树形菜单是一种常见的用户界面元素,它用于以层次结构展示数据,使得用户能够清晰地理解和操作复杂的组织结构。在这个项目中,我们看到一个利用JavaScript、Struts1.2、Spring2.0以及Ajax2.0实现的树形...
综上所述,这个项目可能是一个使用ASP.NET MVC架构开发的博客系统,其中整合了Jquery技术实现交互式的树形菜单导航。开发者可以研究项目源码,学习如何在MVC环境中集成jQuery,以及如何处理动态加载的数据来构建响应...
HTML树形菜单是一种在网页上展示层次结构数据的交互式元素,常用于网站导航、文件目录展示或组织复杂信息。这种菜单通常具有可展开和折叠的节点,用户可以通过点击节点来展开或隐藏其子节点,以此来探索和操作多层次...
这篇博客主要介绍树形控件的两个小小的功能: 下拉菜单 输入过滤框 以CSS样式为主,也会涉及到Vue组件和element组件的使用。 对于没有层级的数据,我们可以使用表格或卡片来展示。要展示或建立层级关系,就一定会...
6. **树形数据展示**:利用JavaScript库(如jQuery或更现代的React、Vue等)实现可交互的树形控件,支持节点展开、折叠、拖拽排序等操作。 7. **API接口**:可能预设了一些与后端交互的API,方便开发者对接自己的...
这个项目的实践价值在于,它提供了一个实际的示例,让开发者学习如何在MFC中结合使用树形控件和列表控件,这对于构建具有复杂数据展示需求的应用程序非常有用。同时,它也展示了如何跨版本地管理代码,这对于维护和...
总结,这个项目展示了如何整合前端的Ajax技术和后端的JSP处理,结合Oracle数据库,实现动态树形菜单的功能。它涉及到Web开发中的数据交互、服务器端逻辑处理、数据库操作等多个重要环节,对于提升Web应用的交互性和...
在Web开发中,"折叠树形菜单"是一种常见的交互元素,尤其在网站导航、数据层级展示及设置选项中广泛使用。这种菜单结构呈现为一个多级的树状布局,允许用户通过展开或折叠节点来查看和操作层次化信息。在本项目中,...