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 相关文章推荐
Js 时间间隔计算的函数(间隔天数)
Nov 15 Javascript
iframe中子父类窗口调用JS的方法及注意事项
Aug 25 Javascript
JavaScript类型系统之基本数据类型与包装类型
Jan 06 Javascript
Angular中$compile源码分析
Jan 28 Javascript
JavaScript弹出对话框的三种方式
Mar 23 Javascript
JS组件Bootstrap实现弹出框效果代码
Apr 26 Javascript
JS传递对象数组为参数给后端,后端获取的实例代码
Jun 28 Javascript
浅谈Vue SPA 首屏加载优化实践
Dec 15 Javascript
快速解决angularJS中用post方法时后台拿不到值的问题
Aug 14 Javascript
vue添加class样式实例讲解
Feb 12 Javascript
vue 使用v-for进行循环的实例代码详解
Feb 19 Javascript
JavaScript前后端JSON使用方法教程
Nov 23 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
解决phpmyadmin 乱码,支持gb2312和utf-8
2006/11/20 PHP
php多进程中的阻塞与非阻塞操作实例分析
2020/03/04 PHP
在jquery中combobox多选的不兼容问题总结
2013/12/24 Javascript
JS的get和set使用示例
2014/02/20 Javascript
javascript浏览器兼容教程之事件处理
2014/06/09 Javascript
freemarker判断对象是否为空的方法
2015/08/13 Javascript
jQuery控制frames及frame页面JS的方法
2016/03/08 Javascript
AngularJS ng-repeat数组有重复值的解决方法
2016/10/23 Javascript
JS模拟实现ECMAScript5新增的数组方法
2017/03/20 Javascript
JS实现给json数组动态赋值的方法示例
2020/03/19 Javascript
angularjs利用directive实现移动端自定义软键盘的示例
2017/09/20 Javascript
Vue Element使用icon图标教程详解(第三方)
2018/02/07 Javascript
Linux Centos7.2下安装nodejs&amp;npm配置全局路径的教程
2018/05/15 NodeJs
js使用Promise实现简单的Ajax缓存
2018/11/14 Javascript
JavaScript canvas实现雨滴特效
2021/01/10 Javascript
[52:27]2018DOTA2亚洲邀请赛 3.31 小组赛B组 paiN vs Secret
2018/04/01 DOTA
Python生成验证码实例
2014/08/21 Python
Python3 加密(hashlib和hmac)模块的实现
2017/11/23 Python
python合并同类型excel表格的方法
2018/04/01 Python
Python操作mongodb的9个步骤
2018/06/04 Python
在pycharm下设置自己的个性模版方法
2019/07/15 Python
Django models.py应用实现过程详解
2019/07/29 Python
对python中的os.getpid()和os.fork()函数详解
2019/08/08 Python
JavaScript+Canvas实现自定义画板的示例代码
2019/05/13 HTML / CSS
诗普兰迪官方网站:Splendid
2018/09/18 全球购物
Ryderwear澳洲官网:澳大利亚高端健身训练装备品牌
2018/09/18 全球购物
PatPat德国:妈妈的每日优惠
2019/10/02 全球购物
俄罗斯小米家用电器、电子产品和智能家居商店:Poood.ru
2020/04/03 全球购物
马来西亚排名第一的宠物用品店:Pets Wonderland
2020/04/16 全球购物
JVM是一个编译程序还是解释程序
2012/09/11 面试题
销售人员中英文自荐信
2013/09/22 职场文书
金融学专科生自我鉴定
2014/02/21 职场文书
司仪主持词两篇
2014/03/22 职场文书
和睦家庭事迹
2014/05/14 职场文书
2014年出纳工作总结与计划
2014/12/09 职场文书
音乐教师个人总结
2015/02/06 职场文书