javascript将list转换成树状结构的实例


Posted in Javascript onSeptember 08, 2017

如下所示:

/**
   * 将list装换成tree
   * @param {Object} myId 数据主键id
   * @param {Object} pId  数据关联的父级id
   * @param {Object} list list集合
   */
  function listToTree(myId,pId,list){
   function exists(list, parentId){
    for(var i=0; i<list.length; i++){
     if (list[i][myId] == parentId) return true;
    }
    return false;
   }
   
   var nodes = [];
   // get the top level nodes
   for(var i=0; i<list.length; i++){
    var row = list[i];
    if (!exists(list, row[pId])){
     nodes.push(row);
    }
   }
   
   var toDo = [];
   for(var i=0; i<nodes.length; i++){
    toDo.push(nodes[i]);
   }
   while(toDo.length){
    var node = toDo.shift(); // the parent node
    // get the children nodes
    for(var i=0; i<list.length; i++){
     var row = list[i];
     if (row[pId] == node[myId]){
      //var child = {id:row.id,text:row.name};
      if (node.children){
       node.children.push(row);
      } else {
       node.children = [row];
      }
      toDo.push(row);
     }
    }
   }
   return nodes;
  }
  
  var list=[
   {"ids":1,"parendId":0,"name":"Foods",url:"wwww"},
   {"ids":2,"parentId":1,"name":"Fruits"},
   {"ids":3,"parentId":1,"name":"Vegetables"},
   {"ids":4,"parentId":2,"name":"apple"},
   {"ids":5,"parentId":2,"name":"orange"},
   {"ids":6,"parentId":3,"name":"tomato"},
   {"ids":7,"parentId":3,"name":"carrot"},
   {"ids":8,"parentId":3,"name":"cabbage"},
   {"ids":9,"parentId":3,"name":"potato"},
   {"ids":10,"parentId":3,"name":"lettuce"},
   
   {"ids":11,"parendId":0,"name":"Foods"},
   {"ids":12,"parentId":11,"name":"Fruits"},
   {"ids":13,"parentId":11,"name":"Vegetables"},
   {"ids":14,"parentId":12,"name":"apple"},
   {"ids":15,"parentId":12,"name":"orange"},
   {"ids":16,"parentId":13,"name":"tomato"},
   {"ids":17,"parentId":13,"name":"carrot"},
   {"ids":18,"parentId":13,"name":"cabbage"},
   {"ids":19,"parentId":13,"name":"potato"},
   {"ids":20,"parentId":13,"name":"lettuce"}
  ];
  
  console.log(JSON.stringify(listToTree("ids","parentId",list)));
  console.log(listToTree("ids","parentId",list));

以上这篇javascript将list转换成树状结构的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
详解jQuery中的empty、remove和detach
Apr 11 Javascript
浅谈关于axios和session的一些事
Jul 13 Javascript
knockoutjs模板实现树形结构列表
Jul 31 Javascript
vue引入ueditor及node后台配置详解
Jan 03 Javascript
JS运动特效之链式运动分析
Jan 24 Javascript
说说node中的可读流和可写流的区别
Jun 01 Javascript
angularJs使用ng-repeat遍历后选中某一个的方法
Sep 30 Javascript
开发用到的js封装方法(20种)
Oct 12 Javascript
Node.js 如何利用异步提升任务处理速度
Jan 07 Javascript
JavaScript实现与使用发布/订阅模式详解
Jan 19 Javascript
vue项目部署到nginx/tomcat服务器的实现
Aug 26 Javascript
js防抖函数和节流函数使用场景和实现区别示例分析
Apr 11 Javascript
浅谈Angular4实现热加载开发旅程
Sep 08 #Javascript
js匿名函数使用&amp;传参(实例)
Sep 08 #Javascript
js HTML5 canvas绘制图片的方法
Sep 08 #Javascript
WebStorm ES6 语法支持设置&amp;babel使用及自动编译(详解)
Sep 08 #Javascript
React如何将组件渲染到指定DOM节点详解
Sep 08 #Javascript
javascript获取指定区间范围随机数的方法
Sep 08 #Javascript
原生js实现简单的模态框示例
Sep 08 #Javascript
You might like
php桌面中心(四) 数据显示
2007/03/11 PHP
PHP 最大运行时间 max_execution_time修改方法
2010/03/08 PHP
PHP不用递归实现无限分级的例子分享
2014/04/18 PHP
php中函数前加&amp;符号的作用分解
2014/07/08 PHP
php查询ip所在地的方法
2014/12/05 PHP
PHP Include文件实例讲解
2019/02/15 PHP
记录几个javascript有关的小细节
2007/04/02 Javascript
解决jquery .ajax 在IE下卡死问题的解决方法
2009/10/26 Javascript
jQuery hover 延时器实现代码
2011/03/12 Javascript
JavaScript实现的内存数据库LokiJS介绍和入门实例
2014/11/17 Javascript
JavaScript数据库TaffyDB用法实例分析
2015/07/27 Javascript
jQuery编程中的一些核心方法简介
2015/08/14 Javascript
javascript鼠标右键菜单自定义效果
2020/12/08 Javascript
switch语句的妙用(必看篇)
2016/10/03 Javascript
jquery easyui DataGrid简单示例
2017/01/23 Javascript
vue 自定义组件 v-model双向绑定、 父子组件同步通信的多种写法
2017/11/27 Javascript
vue实现路由懒加载及组件懒加载的方式
2019/06/11 Javascript
详解小程序如何动态绑定点击的执行方法
2019/11/26 Javascript
[01:42]辉夜杯战队访谈宣传片—FANTUAN
2015/12/25 DOTA
[57:09]DOTA2-DPC中国联赛 正赛 Phoenix vs Dynasty BO3 第一场 1月26日
2021/03/11 DOTA
Python的装饰器使用详解
2017/06/26 Python
Python数据处理numpy.median的实例讲解
2018/04/02 Python
Python实现的计算器功能示例
2018/04/26 Python
pytorch 彩色图像转灰度图像实例
2020/01/13 Python
浅谈python3 构造函数和析构函数
2020/03/12 Python
Python读取图像并显示灰度图的实现
2020/12/01 Python
详解canvas多边形(蜘蛛图)的画法示例
2018/01/29 HTML / CSS
如何利用find命令查找文件
2016/11/18 面试题
高级护理实习生自荐信
2013/09/28 职场文书
经典导游欢迎词大全
2014/01/16 职场文书
干部四风问题整改措施思想汇报
2014/10/13 职场文书
党员教师学习党的群众路线教育实践活动心得体会
2014/10/31 职场文书
解除劳动合同证明书模板
2014/11/20 职场文书
幼儿园开学通知
2015/04/24 职场文书
教师节联欢会主持词
2015/07/04 职场文书
读《教育心理学》心得体会
2016/01/22 职场文书