JavaScript将具有父子关系的原始数据格式化成树形结构数据
来源:互联网 发布:手机制谱软件 编辑:程序博客网 时间:2024/04/28 10:20
前几天遇到一个树型组件(类似树形菜单)数据格式化的问题,由于后台把原始查询的数据直接返回给前端,父子关系并未构建,因此需要前端JS来完成,后台返回的数据和下面的测试数据相似。
var data=[{id:1,pid:0,text:'A'},{id:2,pid:4,text:"E[父C]"},{id:3,pid:7,text:"G[父F]"},{id:4,pid:1,text:"C[父A]"},{id:5,pid:6,text:"D[父B]"},{id:6,pid:0,text:'B'},{id:7,pid:4,text:"F[父C]"}];
我们可以发现上面的测试数据有几个特点,父节点与子节点不是顺序排列的,也就是说按照id的顺序,并不是先有父节点,然后有下面的子节点,顺序是混乱的,再就是父子层级有很多,这里是3层。总结为:顺序混乱,层级未知。
如果是顺序排列,层级固定,可以投机取巧,写法相对简单,但是这里恰恰相反。因此给格式化造成了一定的困难,当遇到层级未知的时候,一般都会想到递归的写法,这里我感觉用递归也不好做,因此我也就没有向这方面去深入思考,这里就也不做多的说明。
那么我的做法比起递归来讲更容易理解,先看下代码。
function toTreeData(data){var pos={};var tree=[];var i=0;while(data.length!=0){if(data[i].pid==0){tree.push({id:data[i].id,text:data[i].text,children:[]});pos[data[i].id]=[tree.length-1];data.splice(i,1);i--;}else{var posArr=pos[data[i].pid];if(posArr!=undefined){var obj=tree[posArr[0]];for(var j=1;j<posArr.length;j++){obj=obj.children[posArr[j]];}obj.children.push({id:data[i].id,text:data[i].text,children:[]});pos[data[i].id]=posArr.concat([obj.children.length-1]);data.splice(i,1);i--;}}i++;if(i>data.length-1){i=0;}}return tree;}
前面的测试数据经过上面代码中的方法格式化后如下:
[ { "id": 1, "text": "A", "children": [ { "id": 4, "text": "C[父A]", "children": [ { "id": 7, "text": "F[父C]", "children": [ { "id": 3, "text": "G[父F]", "children": [] } ] }, { "id": 2, "text": "E[父C]", "children": [] } ] } ] }, { "id": 6, "text": "B", "children": [ { "id": 5, "text": "D[父B]", "children": [] } ] }]
原理很简单,使用一个死循环来遍历数组,循环跳出的条件是数组的长度为0,也就是说,循环内部会引起数组长度的改变。这里就几个关键点做一下说明。
- 为什么要用死循环?顺序混乱,如果单次循环,子节点出现在父节点之前,子节点不好处理,这里做一个死循环相当于先把父节点全部找出,但是这里又不是简单的先把所有的父节点找出,找的同时,如果这个节点父节点已经找到,那么可以继续做后续操作;
- 如何建立层级关系?代码中有一个变量pos,这个用于保存每个已添加到tree中的节点在tree中位置信息,比如上面测试数据父节点A添加到tree后,那么pos中增加一条数据,pos={”1“:[0]},1就是父节点A的id,这样写便于查找,[0]表示父节点A在tree的第一个元素,即tree[0],如果某个位置信息为[1,2,3],那么表示这个节点在tree[1].children[2].children[3],这里的位置关系其实就是父子的层级关系。
上面的测试数据的pos信息如下:
{"1":[0],"2":[0,0,1],"3":[0,0,0,0],"4":[0,0],"5":[1,0],"6":[1],"7":[0,0,0]}
2 0
- JavaScript将具有父子关系的原始数据格式化成树形结构数据
- Java编程:将具有父子关系的数据库表数据转换为树形结构,支持无限层级
- js将有父子关系的数据转换成树形结构数据
- 由具有父子关系数据得到其树结构
- 根据数据的父子关系创建树形结构并实现遍历
- 根据数据的父子关系创建树形结构并实现遍历
- 根据数据的父子关系创建树形结构并实现遍历
- javascript将扁平的数据转为树形结构
- yx-树形结构展示,父子关系显示为完整树形
- Javascript--父子数据层次结构和平行结构的转换
- 用父子关系的树状结构数据集作报表
- 将给定格式的线性结构转换为树形结构
- JavaScript之树形结构的数据(一)
- indent工具,将代码格式化成内核代码的格式
- [jQuery]操作具有父子关系的复选框
- 将xml的数据写入swing树形结构
- 将excel树形结构的数据导入数据库
- 应用xslt实现包含父子关系数据的xml的格式转换
- Form中Trigger的执行顺序(转)
- java方法体超时设计
- edfdfdf
- android学习笔记之绘图篇
- fdefdfdfds
- JavaScript将具有父子关系的原始数据格式化成树形结构数据
- fedfdfsfsd
- db2检查什么表被锁住了,如何解锁
- 在mac系统安装Apache Tomcat的详细步骤
- SEAndroid的IPC之Binder
- DFS【古希腊之争(一)】
- 学生信息管理系统系列博客(一)
- Silverlight玩转控件(二)——Canvas布局
- ios--UIView动画简单示例