javascript将list转换成树状结构的实例

 更新时间:2017年09月08日 09:08:37   作者:思思博士  
下面小编就为大家带来一篇javascript将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));

以上这篇javascript将list转换成树状结构的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持脚本之家。

相关文章

  • javascript实现画不相交的圆

    javascript实现画不相交的圆

    这篇文章主要介绍了javascript实现画不相交的圆,这个也是阿里巴巴的笔试题,只不过忘记当时是不是要求必须用canvas来实现,下篇文章再写吧。
    2015-04-04
  • Js 刷新框架页的代码

    Js 刷新框架页的代码

    Js刷新框架页方法,有时候需要控制下框架里面的页面内容的刷新,下面的方法整理的比较详细了,需要的朋友可以参考下。
    2010-04-04
  • 原生js实现查找/添加/删除/指定元素的class

    原生js实现查找/添加/删除/指定元素的class

    查找、添加、删除、指定元素的class使用原生js实现不可思议吧,感兴趣的朋友可以参考下哈,希望可以帮助到你
    2013-04-04
  • uniapp微信小程序订阅消息发送服务通知超详细教程

    uniapp微信小程序订阅消息发送服务通知超详细教程

    在使用或开发小程序过程中,我们会发现消息通知是非常重要的一个环节,下面这篇文章主要给大家介绍了关于uniapp微信小程序订阅消息发送服务通知的相关资料,需要的朋友可以参考下
    2023-06-06
  • js实现三角形粒子运动

    js实现三角形粒子运动

    这篇文章主要为大家详细介绍了js实现三角形粒子运动,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-09-09
  • JavaScript的防抖和节流案例

    JavaScript的防抖和节流案例

    这篇文章介绍了JavaScript的防抖和节流案例的代码实现和概念.包含详细的代码,希望对你有所帮助
    2021-06-06
  • 微信小程序调用支付接口的完整流程记录

    微信小程序调用支付接口的完整流程记录

    我们在做小程序支付相关的开发时,总会遇到这些难题,下面这篇文章主要给大家介绍了关于微信小程序调用支付接口的完整流程,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-02-02
  • JavaScript实现重置表单(reset)的方法

    JavaScript实现重置表单(reset)的方法

    这篇文章主要介绍了JavaScript实现重置表单(reset)的方法,涉及javascript中reset()方法的使用技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-04-04
  • JS实现简单表格排序操作示例

    JS实现简单表格排序操作示例

    这篇文章主要介绍了JS实现简单表格排序操作,结合具体实例形式分析了JavaScript事件响应及table表格动态操作相关技巧,需要的朋友可以参考下
    2017-10-10
  • 记录微信小程序 height: calc(xx - xx);无效问题

    记录微信小程序 height: calc(xx - xx);无效问题

    这篇文章主要介绍了微信小程序 - height: calc(xx - xx);无效 问题,文中给大家扩展介绍下jquery点击添加样式,再次点击移除样式的实例代码,需要的朋友可以参考下
    2019-12-12

最新评论