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 相关文章推荐
dwr spring的集成实现代码
Mar 22 Javascript
类似GMAIL的Ajax信息反馈显示
Feb 16 Javascript
Jquery ajax传递复杂参数给WebService的实现代码
Aug 08 Javascript
JavaScript起点(严格模式深度了解)
Jan 28 Javascript
JavaScript原生对象之String对象的属性和方法详解
Mar 13 Javascript
JavaScript代码实现图片循环滚动效果
Mar 19 Javascript
修改jquery中dialog的title属性方法(推荐)
Aug 26 Javascript
Angularjs中ng-repeat的简单实例
Aug 25 Javascript
谈谈JavaScript中super(props)的重要性
Feb 12 Javascript
微信小程序中weui用法解析
Oct 21 Javascript
微信小程序开发打开另一个小程序的实现方法
May 17 Javascript
js实现鼠标点击飘爱心效果
Aug 19 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 array的学习笔记
2012/05/16 PHP
PHP中使用file_get_contents抓取网页中文乱码问题解决方法
2014/12/17 PHP
php实现评论回复删除功能
2017/05/23 PHP
PHP实现的DES加密解密类定义与用法示例
2020/11/02 PHP
通用于ie和firefox的函数 GetCurrentStyle (obj, prop)
2006/12/27 Javascript
javascript之学会吝啬 精简代码
2010/04/25 Javascript
各种常用的JS函数整理
2013/10/25 Javascript
javascript实现颜色渐变的方法
2013/10/30 Javascript
Javascript仿PHP $_GET获取URL中的参数
2014/05/12 Javascript
jquery获取对象的方法足以应付常见的各种类型的对象
2014/05/14 Javascript
Wireshark基本介绍和学习TCP三次握手
2016/08/15 Javascript
微信小程序去哪里找 小程序到底如何使用(附小程序名单)
2017/01/09 Javascript
微信小程序 五星评价功能的实现
2017/03/09 Javascript
用纯Node.JS弹出Windows系统消息提示框实例(MessageBox)
2017/05/17 Javascript
详解Vue.js分发之作用域槽
2017/06/13 Javascript
js使用generator函数同步执行ajax任务
2017/09/05 Javascript
Vue使用高德地图搭建实时公交应用功能(地图 + 附近站点+线路详情 + 输入提示+换乘详情)
2018/05/16 Javascript
vue2单元测试环境搭建
2018/05/24 Javascript
使用koa-log4管理nodeJs日志笔记的使用方法
2018/11/30 NodeJs
vueScroll实现移动端下拉刷新、上拉加载
2019/03/22 Javascript
微信小程序自定义tabbar custom-tab-bar 6s出不来解决方案(cover-view不兼容)
2019/11/01 Javascript
javascript实现倒计时效果
2020/02/17 Javascript
Python对象转JSON字符串的方法
2016/04/27 Python
python读出当前时间精度到秒的代码
2019/07/05 Python
python查看数据类型的方法
2019/10/12 Python
Python数据分析pandas模块用法实例详解
2019/11/20 Python
微信小程序实现可实时改变转速的css3旋转动画实例代码
2018/09/11 HTML / CSS
简单介绍HTML5中的文件导入
2015/05/08 HTML / CSS
澳大利亚头发和美容产品购物网站:OZ Hair & Beauty
2020/03/27 全球购物
北京青年观后感
2015/06/15 职场文书
nginx 反向代理之 proxy_pass的实现
2021/03/31 Servers
python爬取企查查企业信息之selenium自动模拟登录企查查
2021/04/08 Python
分析JVM源码之Thread.interrupt系统级别线程打断
2021/06/29 Java/Android
Python中的matplotlib绘制百分比堆叠柱状图,并为每一个类别设置不同的填充图案
2022/04/20 Python
详解PyTorch模型保存与加载
2022/04/28 Python
Golang解析JSON对象
2022/04/30 Golang