let listToTree = (list, id = "id", pId = "pId") => { let map = {}, listMap = {}, rootList = []; for (let i = 0, max = list.length; i < max; i++) { let one = Object.assign({}, list[i]); map[one[id]] = one; if (listMap[one[id]]) { one.children = listMap[one[id]]; } if (one.hasOwnProperty(pId) && one[pId] !== "") { if (map[one[pId]]) { let c = map[one[pId]].children || (map[one[pId]].children = []); c.push(one); } else { if (!listMap[one[pId]]) listMap[one[pId]] = [one]; else listMap[one[pId]].push(one); } } else { rootList.push(one); } } return { list: rootList, map }; };
使用
let data=[{ id:1, text:"1" },{ id:2, pId:1, text:"2" }]; let tree=listToTree(data);
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/90514.html
摘要:对于元素,即上图的列表项不是元素,并没有实现远程更新的策略。故实际项目中,只对内容作了远程控制动态更新机制的处理。目前腾讯内部所有的产品,均在使用其进行线上产品的崩溃监控。 腾讯Bugly特约作者: 王金波 问题描述 做过Android开发的人都遇到过这样的问题:随着需求的变化,某些入口界面通常会出现 UI的增加、减少、内容变化、以及跳转界面发生变化等问题。每次发生变化都要手动修改代码...
摘要:初始化数据输出结果转换函数这个转换函数不受数据关系层级的限制,无论有多少层关系,只要一次循环就能搞定。所有人拿一根线,从他自己的位置开始,走到他父亲的位置,那么这个树形结构就完成了。只要每个节点都做完了,树形就出来了。 初始化数据 var data = [ { parentId: 0, id: 1, value: 1 }, { parentId: 3, id: 2, v...
摘要:在市面上找到一个好用的树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在之外引入其他重量级插件,因此就有了。版本增加穿梭框左侧右侧数据勾选事件,穿梭框左侧右侧底部。 el-tree-transfer 简介·请先阅读文档及版本说明 因为公司业务使用vue框架,ui库使用的element-ui。在市面上找到一个好用的vue树形穿梭框组件都很难,又不想仅仅因为一个穿梭框在element-ui之...
摘要:因为任务需要添加到树的结构上,所以要记录任务是添加到哪个结点上的,需要为每个树结点添加一个作为标识以便于在结点上添加任务,树状结构中每个结点的按照树的先序遍历将结点的依次储存于数组中。 localStorage实现本地储存树形菜单 最近在写一个Todo-list的页面,页面布局和操作都写完后,想要用localStorage实现本地储存。然而对储存数据的方法一无所知,就先去了解了web的...
摘要:然而自带控件中并不存在树形控件,我们要在开发中使用树形控件,通常需要自己扩展列表控件。现在在这里开源一个自己写的高扩展性,高复用性的树形结构控件。通过简单以上三步,你就可以把该树形控件集成到你的项目中。 一、简介 树形控件在多列列表、多级菜单中使用比较常见,比如:国家-省份-城市 多级选择、学校-专业-班级 多级选择等等。然而IOS自带控件中并不存在树形控件,我们要在IOS开发中使用树...
阅读 1815·2021-11-24 10:34
阅读 2889·2021-11-22 11:58
阅读 3524·2021-09-28 09:35
阅读 1526·2019-08-30 15:53
阅读 2578·2019-08-30 14:11
阅读 1392·2019-08-29 17:31
阅读 411·2019-08-26 13:53
阅读 2017·2019-08-26 13:45