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转换成树状结构的实例就是小编分享给大家的全部内容了,希望能给大家一个参考,也希望大家多多支持我们。

(0)

相关推荐

  • JS无限树状列表实现代码

    tree.js 复制代码 代码如下: /******************************** 树形组织框架列表 v1.0 2011年1月6日 作者:flycrosscloud ********************************/ //初始化框架 var allImages = { HasNodeClose: "<img src='image/ftv2pnode.gif'/>", //包含子节点,闭合状态(不是最后一个) HasNodeOpen: &

  • 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] == parent

  • 利用Django模版生成树状结构实例代码

    前言 我们经常会有这样的需求,比如评论功能,每个评论都有可能会有自己的子评论,如果在界面只展示成一列的话非常不美观,也不能体现出他们的层级关系.那么我们今天就来看看如何使用Django的模版来生成树状结构,以本站为例,效果如下图所示: 那么我们要怎么实现呢?首先先看看评论实体的定义,如下所示: class Comment(models.Model): body = models.TextField('正文', max_length=300) author = models.ForeignKey(

  • C#使用Jquery zTree实现树状结构显示 异步数据加载

    C#使用Jquery zTree实现树状结构显示_异步数据加载 JQuery-Ztree下载地址:https://github.com/zTree/zTree_v3 JQuery-Ztree数结构演示页面:  http://www.treejs.cn/v3/demo.php#_101 关于zTree的详细解释请看演示页面,还有zTree帮助Demo. 下面简要讲解下本人用到的其中一个实例(直接上关键代码了): 异步加载节点数据: A-前台: <link href="zTree_v3-mas

  • 由简入繁实现Jquery树状结构的方法(推荐)

    在项目中,我们经常会需要一些树状结构的样式来显示层级结构等,比如下图的样式,之前在学.net的时候可以直接拖个服务端控件过来直接使用非常方便.但是利用Jquery的一些插件,也是可以实现这些效果的,比如说Jquery.treeview.js插件. 下面就直入主题,开始从简入繁的分析怎么使用treeview插件,从已知的知识开始轻松入手,让树状结构唾手可得. 显示树状结构的几个实现步骤: 一.HTML做初始静态原型. 首先通过<ul></ul><li></li>

  • 基于jQuery ztree实现表格风格的树状结构

    zTree 简介 zTree 是一个依靠 jQuery 实现的多功能 "树插件".优异的性能.灵活的配置.多种功能的组合是 zTree 最大优点. zTree 是开源免费的软件(MIT 许可证).如果您对 zTree 感兴趣或者愿意资助 zTree 继续发展下去,可以进行捐助. zTree v3.0 将核心代码按照功能进行了分割,不需要的代码可以不用加载 采用了 延迟加载 技术,上万节点轻松加载,即使在 IE6 下也能基本做到秒杀 兼容 IE.FireFox.Chrome.Opera.

  • JAVA后台转换成树结构数据返回给前端的实现方法

    我们会经常用到树形,那么树形结构的数据是在前端做还是在后台做呢?我自己用过前端的ztree,selectTree等这些属于前端的组件,后台只需要把一个表的所有数据返回给前段就可以,前端可以通过id,pid来把层级结构划分,要是我们前端需要后台直接返回树结构数据怎么办,那么接下来我给大家介绍一下我写过的例子. 我们先看一张图了解一下树结构:我这里随便找一张图了解一下即可 接下来我们看一下数据,主要包括id,pid,名称 接下来我们写一个小例子,用递归方式转换为数 实体: package cn.cc

  • JavaScript将数字转换成大写中文的方法

    本文实例讲述了JavaScript将数字转换成大写中文的方法.分享给大家供大家参考.具体实现方法如下: function intToChinese ( str ) { str = str+''; var len = str.length-1; var idxs = ['','十','百','千','万','十','百','千','亿','十','百','千','万','十','百','千','亿']; var num = ['零','壹','贰','叁','肆','伍','陆','柒','捌',

  • JavaScript实现经纬度转换成地址功能

    在webAPP开发过程中,需要将返回的经纬度转换成中文地址,一番折腾后得以实现,总结如下 原理分析: 百度地图API提供了一个JS库,我们只需要用这个接口就可以实现转换功能,这里我写一个简单的demo,与君共勉 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=utf-8" /> <meta name="viewpor

  • javascript将浮点数转换成整数的三个方法

    Summary 暂时我就想到3个方法而已.如果读者想到其他好用方法,也可以交流一下 parseInt 位运算符 Math.floor Math.ceil Description 一.parseInt 1. 实例 parseInt("13nash");//13 parseInt("")// NaN parseInt("0xA") //10(十六进制) parseInt(" 13")//13 parseInt("070&

  • JavaScript将字符串转换成字符编码列表的方法

    本文实例讲述了JavaScript将字符串转换成字符编码列表的方法.分享给大家供大家参考.具体如下: JavaScript将字符串转换成字符编码列表,例如foo转换成 [112,111,111] 方法 1: JavaScript 1.6 Array.map('foo', function(x) { return String.charCodeAt(x) }) // is [112,111,111] 方法2: JavaScript 1.7 [ String.charCodeAt(x) for ea

随机推荐