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模拟select,jselect的方法实现
Nov 08 Javascript
Jquery实现列表(隔行换色,全选,鼠标滑过当前行)效果实例
Jun 09 Javascript
Jquery 实现表格颜色交替变化鼠标移过颜色变化实例
Aug 28 Javascript
jQuery简单实现提交数据出现loading进度条的方法
Mar 29 Javascript
jQuery中设置form表单中action值的实现方法
May 25 Javascript
JS实用技巧小结(屏蔽错误、div滚动条设置、背景图片位置等)
Jun 16 Javascript
通过javascript进行UTF-8编码的实现方法
Jun 27 Javascript
Bootstrap Metronic完全响应式管理模板学习笔记
Jul 08 Javascript
D3.js实现折线图的方法详解
Sep 21 Javascript
Vue2.0使用过程常见的一些问题总结学习
Apr 10 Javascript
JS获取input[file]的值并显示在页面的实现方法
Mar 09 Javascript
vue配置接口域名方法总结
May 12 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几个实用自定义函数小结
2016/01/25 PHP
PHP入门教程之上传文件实例详解
2016/09/11 PHP
自制PHP框架之模型与数据库
2017/05/07 PHP
PHP中的self关键字详解
2019/06/23 PHP
脚本吧 - 幻宇工作室用到js,超强推荐base.js
2006/12/23 Javascript
分享10篇优秀的jQuery幻灯片制作教程及应用案例
2011/04/16 Javascript
javascript判断iphone/android手机横竖屏模式的函数
2011/12/20 Javascript
javascript学习笔记(十四) window对象使用介绍
2012/06/20 Javascript
使用jquery动态加载javascript以减少服务器压力
2012/10/29 Javascript
Django+vue跨域问题解决的详细步骤
2019/01/20 Javascript
记一次vue去除#问题处理经过小结
2019/01/24 Javascript
js面向对象方式实现拖拽效果
2021/03/03 Javascript
如何运行Python程序的方法
2013/04/21 Python
解决windows下Sublime Text 2 运行 PyQt 不显示的方法分享
2014/06/18 Python
Python写的Tkinter程序屏幕居中方法
2015/03/10 Python
Python对列表排序的方法实例分析
2015/05/16 Python
Python 迭代器与生成器实例详解
2017/05/18 Python
python执行scp命令拷贝文件及文件夹到远程主机的目录方法
2019/07/08 Python
由面试题加深对Django的认识理解
2019/07/19 Python
Python用来做Web开发的优势有哪些
2020/08/05 Python
地图可视化神器kepler.gl python接口的使用方法
2020/12/22 Python
利用HTML5画出一个坦克的形状具体实现代码
2013/06/20 HTML / CSS
自荐信模版
2013/10/24 职场文书
浙江文明网签名寄语
2014/01/18 职场文书
小学音乐教学反思
2014/02/05 职场文书
大学生先进事迹材料
2014/02/16 职场文书
毕业生代领毕业材料的授权委托书
2014/09/29 职场文书
信用卡工资证明范本
2014/10/17 职场文书
爱心捐书倡议书
2015/04/27 职场文书
2015年平安创建工作总结
2015/04/29 职场文书
李强感恩观后感
2015/06/17 职场文书
JavaScript 实现页面滚动动画
2021/04/24 Javascript
redis哨兵常用命令和监控示例详解
2021/05/27 Redis
Pytorch GPU内存占用很高,但是利用率很低如何解决
2021/06/01 Python
电脑无法安装Windows 11怎么办?无法安装Win11的解决方法
2021/11/21 数码科技
Mysql查询时间区间日期列表,不会由于数据表数据影响
2022/04/19 MySQL