收藏本站腾讯微博新浪微博

经典论坛

 找回密码
 注册

QQ登录

只需一步,快速开始

蓝色理想 最新研发动态 网站开通淘帖功能 - 蓝色理想插件 论坛内容导读一页看论坛 - 给官方提建议

论坛活动及任务 地图和邮件任务 请多用悬赏提问 热夏来袭,选一款蓝色理想的个性T恤吧!

手机上论坛,使用APP获得更好体验 急需前端攻城狮,获得内部推荐机会 论坛开通淘帖功能,收藏终于可以分类了!

搜索
查看: 2294|回复: 1

[其他] json数组排序,类似树形结构数据的先序遍历

[复制链接]
发表于 2016-5-18 13:04:34 | 显示全部楼层 |阅读模式
已知json数组如下:

  1. var zNodes = [
  2.     {id:1,fid:0,title:"A",status:"0"},
  3.     {id:2,fid:0,title:"B",status:"0"},
  4.     {id:3,fid:0,title:"C",status:"0"},
  5.     {id:11,fid:1,title:"A1",status:"1"},
  6.     {id:12,fid:1,title:"A2",status:"1"},
  7.     {id:13,fid:1,title:"A3",status:"1"},
  8.     {id:21,fid:2,title:"B1",status:"1"},
  9.     {id:22,fid:2,title:"B2",status:"1"},
  10.     {id:23,fid:2,title:"B3",status:"1"},
  11.     {id:31,fid:3,title:"C1",status:"1"},
  12.     {id:32,fid:3,title:"C2",status:"1"},
  13.     {id:33,fid:3,title:"C3",status:"1"},
  14.     {id:34,fid:31,title:"C11",status:"2"},
  15.     {id:35,fid:31,title:"C12",status:"2"},  
  16.     {id:36,fid:31,title:"C13",status:"2"},
  17.     {id:37,fid:36,title:"C131",status:"3"},
  18.     {id:38,fid:37,title:"C1311",status:"4"}
  19. ];
复制代码

这是一个从post过来的按fid排序的数组,其中id关联fid,父子关系。如果添加一个root节点,这就是一个树形结构的数据。
目前需要把这个数据排成另一个格式:

  1. var zNodes = [
  2.     {id:1,fid:0,title:"A",status:"0"},
  3.     {id:11,fid:1,title:"A1",status:"1"},
  4.     {id:12,fid:1,title:"A2",status:"1"},
  5.     {id:13,fid:1,title:"A3",status:"1"},
  6.     {id:2,fid:0,title:"B",status:"0"},
  7.     {id:21,fid:2,title:"B1",status:"1"},
  8.     {id:22,fid:2,title:"B2",status:"1"},
  9.     {id:23,fid:2,title:"B3",status:"1"},
  10.     {id:3,fid:0,title:"C",status:"0"},
  11.     {id:31,fid:3,title:"C1",status:"1"},
  12.     {id:34,fid:31,title:"C11",status:"2"},
  13.     {id:35,fid:31,title:"C12",status:"2"},  
  14.     {id:36,fid:31,title:"C13",status:"2"},
  15.     {id:37,fid:36,title:"C131",status:"3"},
  16.     {id:38,fid:37,title:"C1311",status:"4"},
  17.     {id:32,fid:3,title:"C2",status:"1"},
  18.     {id:33,fid:3,title:"C3",status:"1"}
  19. ];
复制代码

其实就是树形结构的先序遍历。
本来打算先构造一个树型对象,但是怎么想都感觉走歪了,昨晚下班的路上想了一晚上,都感觉不太对劲,就没下手。
今天上午想了一下,不就是“找儿子”么?
豁然开朗。
对数组的操作不是太熟悉,找了下文档,终于搞定了,感觉有必要做一个记录,防止以后忘记,顺便分享一下。
实现代码如下:

  1. <script type="text/javascript">
  2. var zNodes = [
  3.     {id:1,fid:0,title:"A",status:"0"},
  4.     {id:2,fid:0,title:"B",status:"0"},
  5.     {id:3,fid:0,title:"C",status:"0"},
  6.     {id:11,fid:1,title:"A1",status:"1"},
  7.     {id:12,fid:1,title:"A2",status:"1"},
  8.     {id:13,fid:1,title:"A3",status:"1"},
  9.     {id:21,fid:2,title:"B1",status:"1"},
  10.     {id:22,fid:2,title:"B2",status:"1"},
  11.     {id:23,fid:2,title:"B3",status:"1"},
  12.     {id:31,fid:3,title:"C1",status:"1"},
  13.     {id:32,fid:3,title:"C2",status:"1"},
  14.     {id:33,fid:3,title:"C3",status:"1"},
  15.     {id:34,fid:31,title:"C11",status:"2"},
  16.     {id:35,fid:31,title:"C12",status:"2"},  
  17.     {id:36,fid:31,title:"C13",status:"2"},
  18.     {id:37,fid:36,title:"C131",status:"3"},
  19.     {id:38,fid:37,title:"C1311",status:"4"}
  20. ];

  21. var array = zNodes.concat();
  22. var Length = zNodes.length;

  23. function findChild(pointer){
  24.     var tempArr = array.concat();
  25.     var id = array[pointer].id;
  26.     var index = pointer + 1;
  27.     for(var i = pointer + 1; i < Length; i++){
  28.         if(tempArr[i].fid == id){
  29.             array.splice(i,1);
  30.             array.splice(index,0,tempArr[i]);
  31.             index ++;
  32.             tempArr = array.concat();
  33.         }
  34.     }

  35.     pointer++;
  36.     if(pointer < zNodes.length){
  37.         findChild(pointer);
  38.     }else{
  39.         for(var k = 0; k < Length; k++){
  40.             console.log(array[k]);
  41.         }
  42.     }
  43. }
  44. findChild(0);
  45. </script>
复制代码

可运行代码如下

 提示:您可以先修改部分代码再运行

发表于 2016-12-2 14:22:45 | 显示全部楼层
感谢楼主的分享,很受用
回复 支持 反对

使用道具 举报

您需要登录后才可以回帖 登录 | 注册

本版积分规则

QQ|小黑屋|Archiver|手机版|blueidea.com ( ICP05002321 )  

GMT+8, 2019-10-19 15:48 , Processed in 0.077927 second(s), 7 queries , Gzip On, Memcache On.

Powered by Discuz! X3.2 Licensed

© 2001-2013 Comsenz Inc.

快速回复 返回顶部 返回列表