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代码混淆综合解决方案-Javascript在线混淆器
Dec 18 Javascript
Javascript生成json的函数代码(可以用php的json_decode解码)
Jun 11 Javascript
js操作IE浏览器弹出浏览文件夹可以返回目录路径
Jul 14 Javascript
Angular用来控制元素的展示与否的原生指令介绍
Jan 07 Javascript
JavaScript缓冲运动实现方法(2则示例)
Jan 08 Javascript
Jquery uploadify上传插件使用详解
Jan 13 Javascript
总结javascript中的六种迭代器
Aug 16 Javascript
Vue.JS项目中5个经典Vuex插件
Nov 28 Javascript
React教程之封装一个Portal可复用组件的方法
Jan 02 Javascript
JS面向对象之多选框实现
Jan 17 Javascript
Vue自定义组件的四种方式示例详解
Feb 28 Javascript
在vant中使用时间选择器和popup弹出层的操作
Nov 04 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
模板引擎smarty工作原理以及使用示例
2014/05/25 PHP
学习php设计模式 php实现装饰器模式(decorator)
2015/12/07 PHP
php微信公众平台开发(一) 配置接口
2016/12/06 PHP
PHP获取文本框、密码域、按钮的值实例代码
2017/04/19 PHP
禁止IE用右键的JS代码
2013/12/30 Javascript
JavaScript中伪协议 javascript:使用探讨
2014/07/18 Javascript
JavaScript的jQuery库中ready方法的学习教程
2015/08/14 Javascript
原生javascript实现匀速运动动画效果
2016/02/26 Javascript
javascript单页面手势滑屏切换原理详解
2016/03/21 Javascript
jquery中live()方法和bind()方法区别分析
2016/06/23 Javascript
JS实现微信弹出搜索框 多条件查询功能
2016/12/13 Javascript
详解vue-cli本地环境API代理设置和解决跨域
2017/09/05 Javascript
微信小程序收货地址API兼容低版本解决方法
2019/05/18 Javascript
vue 中url 链接左边的小图标更改问题
2019/12/30 Javascript
js实现简单放大镜效果
2020/03/07 Javascript
vue cli 3.0通用打包配置代码,不分一二级目录
2020/09/02 Javascript
JS+CSS实现动态时钟
2021/02/19 Javascript
[01:30]DOTA2上海特锦赛现场采访 Loda倾情献唱
2016/03/25 DOTA
[01:08:17]2018DOTA2亚洲邀请赛3月29日 小组赛B组 EG VS VGJ.T
2018/03/30 DOTA
python的类变量和成员变量用法实例教程
2014/08/25 Python
Phantomjs抓取渲染JS后的网页(Python代码)
2016/05/13 Python
Python AES加密实例解析
2018/01/18 Python
python 获取图片分辨率的方法
2019/01/08 Python
8种用Python实现线性回归的方法对比详解
2019/07/10 Python
详解Python中的正斜杠与反斜杠
2019/08/09 Python
Python基本类型的连接组合和互相转换方式(13种)
2019/12/16 Python
Bjorn Borg官方网上商店:国际运动时尚品牌
2016/08/27 全球购物
HearthSong官网:儿童户外玩具、儿童益智玩具
2017/10/16 全球购物
联想法国官方网站:Lenovo法国
2018/10/18 全球购物
澳大利亚在线床零售商:Bedworks
2020/09/01 全球购物
教育专业个人求职信
2013/12/02 职场文书
教师党性分析材料
2014/02/04 职场文书
七夕相亲活动策划方案
2014/08/31 职场文书
2016年元旦致辞
2015/08/01 职场文书
毕业欢送晚会主持词
2019/06/25 职场文书
承诺书的签字人,需不需要承担相应的责任?
2019/07/09 职场文书