JS把list转换成树状结构

这次给大家带来JS把list转换成树状结构,JS把list转换成树状结构的注意事项有哪些,下面就是实战案例,一起来看一下。

/**   * 将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));

登录后复制

相信看了本文案例你已经掌握了方法,更多精彩请关注【创想鸟】其它相关文章!

推荐阅读:

以上就是JS把list转换成树状结构的详细内容,更多请关注【创想鸟】其它相关文章!

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌抄袭侵权/违法违规的内容, 请发送邮件至253000106@qq.com举报,一经查实,本站将立刻删除。

发布者:PHP中文网,转转请注明出处:https://www.chuangxiangniao.com/p/2770971.html

(0)
上一篇 2025年3月8日 12:46:10
下一篇 2025年3月8日 12:46:17

AD推荐 黄金广告位招租... 更多推荐

相关推荐

  • JS实现图片在网页中被拖拽

    这次给大家带来JS实现图片在网页中被拖拽,JS实现图片在网页中被拖拽的注意事项有哪些,下面就是实战案例,一起来看一下。 Title #pbox{ width: 100%; height:100%; } #box{ width: 200px;…

    编程技术 2025年3月8日
    000
  • js匿名函数传参方法

    这次给大家带来js匿名函数传参方法,js匿名函数传参的注意事项有哪些,下面就是实战案例,一起来看一下。 如下所示: function () { alert(“error”);} //报错:匿名函数不能直接调用 登录后复制 使用 0x01 (…

    编程技术 2025年3月8日
    200
  • JS+H5+canvas绘制图片教程

    这次给大家带来JS+H5+canvas绘制图片教程,JS+H5+canvas绘制图片的注意事项有哪些,下面就是实战案例,一起来看一下。 demo.js window.onload=function() { createcanvas(); d…

    编程技术 2025年3月8日
    200
  • JS实现底部显示新闻并且有滑动特效

    这次给大家带来JS实现底部显示新闻并且有滑动特效,JS实现底部显示新闻并且有滑动特效的注意事项有哪些,下面就是实战案例,一起来看一下。 仿万科的底部的新闻滑动特效 * { padding: 0; margin: 0; } #subject …

    编程技术 2025年3月8日
    200
  • require.js内引入css使用步奏详解

    这次给大家带来require.js内引入css使用步奏详解,require.js内引入css使用的注意事项有哪些,下面就是实战案例,一起来看一下。 在JavaScript的使用中,require.js能提供非常不错的使用效果,这次,文章就重…

    编程技术 2025年3月8日
    200
  • JS数组删除指定元素

    这次给大家带来JS数组删除指定元素,JS数组删除指定元素的注意事项有哪些,下面就是实战案例,一起来看一下。 在大家对JavaScrip的使用中,数组删除特定元素一直是很多人存在的问题,JavaScrip数组怎么去删除特定元素呢?下面文章就给…

    编程技术 2025年3月8日
    200
  • node.js如何实现装饰者模式

    这次给大家带来node.js如何实现装饰者模式,node.js实现装饰者模式的注意事项有哪些,下面就是实战案例,一起来看一下。 装饰者模式的实现更强调类的组合而不是通过继承。这样可以增强灵活性。在node.js 中,可以通过call函数实现…

    编程技术 2025年3月8日
    200
  • JS中FileReader实现图片上传预览

    这次给大家带来JS中FileReader实现图片上传预览,JS中FileReader实现图片上传预览的注意事项有哪些,下面就是实战案例,一起来看一下。 JavaScript使用FileReader实现图片上传预览效果也是很多人比较迷茫的,大…

    编程技术 2025年3月8日
    200
  • js阻止刷新倒计时

    这次给大家带来js阻止刷新倒计时,js阻止刷新倒计时的注意事项有哪些,下面就是实战案例,一起来看一下。 如果是用cs代码写,我们可能会很快的写出来怎样防止刷新,可是我们要进行前段开发,考试是在页面上进行的,这里就要用到我们学到的js了。 前…

    编程技术 2025年3月8日
    200
  • JS的类型怎么转换

    这次给大家带来JS的类型怎么转换,JS类型转换的注意事项有哪些,下面就是实战案例,一起来看一下。 隐式类型转换 在 JavaScript 中,当我们进行比较操作或者加减乘除四则运算操作时,常常会触发 JavaScript 的隐式类型转换机制…

    编程技术 2025年3月8日
    200

发表回复

登录后才能评论