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 相关文章推荐
判断ie的两种简单方法
Aug 12 Javascript
js实现俄罗斯方块小游戏分享
Jan 31 Javascript
jquery 扑捉回车键事件代码
Apr 24 Javascript
javascript中声明函数的方法及调用函数的返回值
Jul 22 Javascript
js实现鼠标经过表格行变色的方法
May 12 Javascript
mvvm双向绑定机制的原理和实现代码(推荐)
Jun 07 Javascript
jQuery+ajax+asp.net获取Json值的方法
Jun 08 Javascript
JS使用正则实现去掉字符串左右空格的方法
Dec 27 Javascript
微信小程序 自定义对话框实例详解
Jan 20 Javascript
js获取ip和地区
Mar 10 Javascript
jQuery实现简单日期格式化功能示例
Sep 19 jQuery
webpack公共组件引用路径简化小技巧
Jun 15 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
CI框架(CodeIgniter)操作redis的方法详解
2018/01/25 PHP
phpMyAdmin通过密码漏洞留后门文件
2018/11/20 PHP
文本框的字数限制功能jquery插件
2009/11/24 Javascript
iframe 父窗口和子窗口相互的调用方法集锦
2010/12/15 Javascript
THREE.JS入门教程(5)你应当知道的十件事
2013/01/24 Javascript
JS 跳转页面延迟2种方法
2013/03/29 Javascript
js 判断控件获得焦点的示例代码
2014/03/04 Javascript
JavaScript实现继承的4种方法总结
2014/10/16 Javascript
jQuery动画出现连续触发、滞后反复执行的解决方法
2015/01/28 Javascript
jQuery选择器源码解读(四):tokenize方法的Expr.preFilter
2015/03/31 Javascript
基于JavaScript实现div层跟随滚动条滑动
2016/01/12 Javascript
关于JavaScript 原型链的一点个人理解
2016/07/31 Javascript
JavaScript中的this引用(推荐)
2016/08/05 Javascript
JavaScript中this的四个绑定规则总结
2016/09/26 Javascript
layui框架table 数据表格的方法级渲染详解
2018/08/19 Javascript
JavaScript中join()、splice()、slice()和split()函数用法示例
2018/08/24 Javascript
微信小程序转发事件实现解析
2019/10/22 Javascript
nodejs处理tcp连接的核心流程
2021/02/26 NodeJs
[01:11:46]DOTA2-DPC中国联赛 正赛 iG vs Magma BO3 第一场 2月23日
2021/03/11 DOTA
python利用matplotlib库绘制饼图的方法示例
2016/12/18 Python
简单了解什么是神经网络
2017/12/23 Python
python之从文件读取数据到list的实例讲解
2018/04/19 Python
Python中跳台阶、变态跳台阶与矩形覆盖问题的解决方法
2018/05/19 Python
在Python中分别打印列表中的每一个元素方法
2018/11/07 Python
对python中url参数编码与解码的实例详解
2019/07/25 Python
解决pyinstaller 打包exe文件太大,用pipenv 缩小exe的问题
2020/07/13 Python
CSS3控制HTML元素动画效果
2014/02/08 HTML / CSS
webView加载html图片遇到的问题解决
2019/10/08 HTML / CSS
导游的职业规划书范文
2013/12/27 职场文书
《苏珊的帽子》教学反思
2014/04/07 职场文书
本科生就业推荐信
2014/05/19 职场文书
涉密人员保密承诺书
2014/05/28 职场文书
面试通知单大全
2015/04/20 职场文书
2015社区六五普法工作总结
2015/04/21 职场文书
微信小程序用户授权最佳实践指南
2021/05/08 Javascript
Go web入门Go pongo2模板引擎
2022/05/20 Golang