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 相关文章推荐
多个iframe自动调整大小的问题
Sep 18 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
js中更短的 Array 类型转换
Oct 30 Javascript
在JavaScript中正确引用bind方法的应用
May 11 Javascript
js表单提交和submit提交的区别实例分析
Dec 10 Javascript
Sublime Text 3常用插件及安装方法
Dec 16 Javascript
JavaScript 正则表达式中global模式的特性
Feb 25 Javascript
很棒的js选项卡切换效果
Jul 15 Javascript
jquery DataTable实现前后台动态分页
Jun 17 jQuery
基于hover的用法实例(推荐)
Jul 04 Javascript
利用vue和element-ui设置表格内容分页的实例
Mar 02 Javascript
JS 设计模式之:工厂模式定义与实现方法浅析
May 06 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 JSON中文乱码的解决方法详解
2013/06/06 PHP
PHP数组与对象之间使用递归实现转换的方法
2015/06/24 PHP
php支付宝APP支付功能
2020/07/29 PHP
PHP操作XML中XPath的应用示例
2019/07/04 PHP
jQuery的实现原理的模拟代码 -3 事件处理
2010/08/03 Javascript
jQuery 下拉列表 二级联动插件分享
2012/03/29 Javascript
Javascript处理DOM元素事件实现代码
2012/05/23 Javascript
JS Replace 全部替换字符的用法小结
2013/12/24 Javascript
jquery搜索框效果实现方法
2015/01/16 Javascript
编写自己的jQuery提示框(Tip)插件
2015/02/05 Javascript
详解nodejs 文本操作模块-fs模块(一)
2016/12/22 NodeJs
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
vue.js实现备忘录功能的方法
2017/07/10 Javascript
基于openlayers4实现点的扩散效果
2020/08/17 Javascript
详解Vue微信授权登录前后端分离较为优雅的解决方案
2018/06/29 Javascript
详解Vue template 如何支持多个根结点
2020/02/10 Javascript
python批量提交沙箱问题实例
2014/10/08 Python
对Python subprocess.Popen子进程管道阻塞详解
2018/10/29 Python
Python实现网页截图(PyQT5)过程解析
2019/08/12 Python
python实现大学人员管理系统
2019/10/25 Python
如何用Matplotlib 画三维图的示例代码
2020/07/28 Python
Python3爬虫中关于中文分词的详解
2020/07/29 Python
python 实现倒计时功能(gui界面)
2020/11/11 Python
Python利用myqr库创建自己的二维码
2020/11/24 Python
为娇小女性量身打造:Petite Studio
2018/11/01 全球购物
可爱的童装和鞋子:Fabkids
2019/08/16 全球购物
车间班长岗位职责
2013/11/30 职场文书
手工社团活动方案
2014/02/17 职场文书
党员公开承诺书范文
2014/03/25 职场文书
奉献演讲稿范文
2014/05/21 职场文书
项目委托协议书(最新)
2014/09/13 职场文书
工商局副局长个人对照检查材料
2014/09/25 职场文书
建筑工地资料员岗位职责
2015/04/13 职场文书
2019旅游导游工作总结
2019/06/27 职场文书
Python包argparse模块常用方法
2021/06/04 Python
Tomcat用户管理的优化配置详解
2022/03/31 Servers