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 相关文章推荐
用JavaScript 处理 URL 的两个函数代码
Aug 13 Javascript
Javascript继承机制的设计思想分享
Aug 28 Javascript
输入自动提示搜索提示功能的使用说明:sugggestion.txt
Sep 02 Javascript
js判断IE浏览器版本过低示例代码
Nov 22 Javascript
jQuery中验证表单提交方式及序列化表单内容的实现
Jan 06 Javascript
JavaScript表单通过正则表达式验证电话号码
Mar 14 Javascript
基于jQuery实现的QQ表情插件
Aug 25 Javascript
详解javascript高级定时器
Dec 31 Javascript
基于javascript实现仿百度输入框自动匹配功能
Jan 03 Javascript
jQuery选择器及jquery案例详解(必看)
May 20 Javascript
微信开发 消息推送实现代码
Oct 21 Javascript
js代码延迟一定时间后执行一个函数的实例
Feb 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
php中将地址生成迅雷快车旋风链接的代码[测试通过]
2011/04/20 PHP
ThinkPHP CURD方法之page方法详解
2014/06/18 PHP
php程序内部post数据的方法
2015/03/31 PHP
YII2 实现多语言配置的方法分享
2017/01/11 PHP
PHP工厂模式的日常使用
2019/03/20 PHP
jquery 图片预加载 自动等比例缩放插件
2008/12/25 Javascript
JQuery的一些小应用收集
2010/03/27 Javascript
Node.js 服务器端应用开发框架 -- Hapi.js
2014/07/29 Javascript
JavaScript中iframe实现局部刷新的几种方法汇总
2016/01/06 Javascript
用jQuery获取table中行id和td值的实现代码
2016/05/19 Javascript
jQuery页面弹出框实现文件上传
2017/02/09 Javascript
Vue 页面跳转不用router-link的实现代码
2018/04/12 Javascript
JS实现选项卡效果的代码实例
2019/05/20 Javascript
vue如何使用async、await实现同步请求
2019/12/09 Javascript
vue页面引入three.js实现3d动画场景操作
2020/08/10 Javascript
在vant中使用时间选择器和popup弹出层的操作
2020/11/04 Javascript
vue 获取url参数、get参数返回数组的操作
2020/11/12 Javascript
[09:22]2014DOTA2西雅图国际邀请赛 主赛事第二日TOPPLAY
2014/07/21 DOTA
[01:12:08]LGD vs OG 2019国际邀请赛淘汰赛 胜者组 BO3 第一场 8.24
2019/09/10 DOTA
python 创建弹出式菜单的实现代码
2017/07/11 Python
对python字典元素的添加与修改方法详解
2018/07/06 Python
Python地图绘制实操详解
2019/03/04 Python
Django 配置多站点多域名的实现步骤
2019/05/17 Python
如何运行.ipynb文件的图文讲解
2019/06/27 Python
Python实现的微信红包提醒功能示例
2019/08/22 Python
python 批量将中文名转换为拼音
2021/02/07 Python
使用tkinter实现三子棋游戏
2021/02/25 Python
Ibatis中如何提高SQL Map的性能
2013/05/11 面试题
linux面试题参考答案(10)
2013/11/04 面试题
JSF的标签库有哪些
2012/04/27 面试题
yy结婚证婚词
2014/01/10 职场文书
目标责任书范本
2014/04/16 职场文书
《春到梅花山》教学反思
2014/04/16 职场文书
清明节网上祭英烈活动总结
2014/04/30 职场文书
公务员党的群众路线教育实践活动学习心得体会
2014/10/30 职场文书
小学数学继续教育研修日志
2015/11/13 职场文书