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 相关文章推荐
避免 showModalDialog 弹出新窗体的原因分析
May 31 Javascript
jQuery AjaxQueue改进步骤
Oct 06 Javascript
javascript数字格式化通用类 accounting.js使用
Aug 24 Javascript
jquery实现保存已选用户
Jul 21 Javascript
Jquery仿IGoogle实现可拖动窗口示例代码
Aug 22 Javascript
JavaScript实现防止网页被嵌入Frame框架的代码分享
Dec 29 Javascript
情人节单身的我是如何在敲完代码之后收到12束玫瑰的(javascript)
Aug 21 Javascript
js实现的简洁网页滑动tab菜单效果代码
Aug 24 Javascript
代码详解javascript模块加载器
Mar 04 Javascript
JQuery事件委托原理与用法实例分析
May 13 jQuery
Vue.js自定义指令学习使用详解
Oct 19 Javascript
一篇文章弄清楚Ajax请求的五个步骤
Mar 17 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
phpcms模块开发之swfupload的使用介绍
2013/04/28 PHP
PHPThumb图片处理实例
2014/05/03 PHP
php页面缓存方法小结
2015/01/10 PHP
PHP文件生成的图片无法使用CDN缓存的解决方法
2015/06/20 PHP
Yii2.0使用阿里云OSS的SDK上传图片、下载、删除图片示例
2017/09/20 PHP
Javascript 构造函数,公有,私有特权和静态成员定义方法
2009/11/30 Javascript
{}与function(){}选用空对象{}来存放keyValue
2012/05/23 Javascript
javaScript array(数组)使用字符串作为数组下标的方法
2013/11/19 Javascript
原生js获取宽高与jquery获取宽高的方法关系对比
2014/04/04 Javascript
jquery插件validation实现验证身份证号等
2015/06/04 Javascript
Bootstrap实现弹性搜索框
2016/07/11 Javascript
javascript 组合按键事件监听实现代码
2017/02/21 Javascript
jquery 禁止鼠标右键并监听右键事件
2017/04/27 jQuery
js经验分享 JavaScript反调试技巧
2018/03/10 Javascript
jquery实现的简单轮播图功能【适合新手】
2018/08/17 jQuery
Node.js折腾记一:读指定文件夹,输出该文件夹的文件树详解
2019/04/20 Javascript
JS前端知识点offset,scroll,client,冒泡,事件对象的应用整理总结
2019/06/27 Javascript
微信小程序scroll-view的滚动条设置实现
2020/03/02 Javascript
在Python的Django框架中显示对象子集的方法
2015/07/21 Python
Window环境下Scrapy开发环境搭建
2018/11/18 Python
python3实现带多张图片、附件的邮件发送
2019/08/10 Python
Python使用Pyqt5实现简易浏览器(最新版本测试过)
2020/04/27 Python
python对一个数向上取整的实例方法
2020/06/18 Python
使用Python实现微信拍一拍功能的思路代码
2020/07/09 Python
13个Pandas实用技巧,助你提高开发效率
2020/08/19 Python
TensorFlow2.0使用keras训练模型的实现
2021/02/20 Python
前端canvas水印快速制作(附完整代码)
2019/09/19 HTML / CSS
HTML5 新事件 小结
2009/07/16 HTML / CSS
农行实习自我鉴定
2013/09/22 职场文书
幼儿园英语教学反思
2014/01/30 职场文书
《搭石》教学反思
2014/04/07 职场文书
大学生个人求职信
2014/06/02 职场文书
2014年个人工作总结报告
2014/11/27 职场文书
2015年新教师工作总结
2015/04/28 职场文书
预备党员入党思想汇报(范文)
2019/08/14 职场文书
2019年消防宣传标语集锦
2019/11/21 职场文书