js list转tree

  1. //------------------------------------List Convert to Tree ----------------------------------------------------//
  2. /**
  3. * 将list装换成tree 封装到JqueryUtils
  4. * @param {Object } id 节点主ID
  5. * @param {Object } pId 父节点ID
  6. * @param {Object } list list数据
  7. * @return {Node} - 自定义Node树节点
  8. * @author Jason - jasonandy@hotmail.com
  9. */
  10. function listToTree(id,pId,list){
  11.  
  12. convertToNodeList(list);
  13. /**
  14. * @param {} list list
  15. * @param {} pId 父节点
  16. * @return {Boolean} 是否存在父节点
  17. * @description now.id = other.pid other 的父节点为 noew
  18. */
  19. function exists(list, pId){
  20. for(var i=0; i<list.length; i++){
  21. if (list[i][id] == pId){
  22. return true;
  23. }
  24. }
  25. return false;
  26. }
  27.  
  28. /**
  29. * 树节点数据 最终数据结构
  30. * @type Node treeNode
  31. */
  32. var nodes = [];
  33.  
  34. /**
  35. * 将所有的节点数据装入List
  36. * @type Number
  37. */
  38. for(var i=0; i<list.length; i++){
  39. var row = list[i];
  40. if (!exists(list, row[pId])){//now.pid != new.id
  41. nodes.push(row);//new ids
  42. }
  43. }
  44.  
  45. /**
  46. * 父节点
  47. * @type Node
  48. */
  49. var pNodes = [];
  50.  
  51. /**
  52. * 将所有的子节点数据装入 pNodes
  53. * @type pNodes
  54. */
  55. for(var i=0; i<nodes.length; i++){
  56. pNodes.push(nodes[i]);
  57. }
  58.  
  59. /**
  60. * 循环处理所有节点数据并进行封装
  61. */
  62. while(pNodes.length){
  63.  
  64. /**
  65. * 把数组的第一个元素从其中删除,并返回第一个元素的值
  66. * the parent node
  67. */
  68. var node = pNodes.shift();
  69.  
  70. /**
  71. *
  72. * get the children nodes
  73. */
  74. for(var i=0; i<list.length; i++){
  75. var row = list[i];
  76. /**
  77. * 取出list所有数据 比较处理
  78. *
  79. * 这里可以定制化 Node 节点数据结构
  80. * {
  81. * "isActive": true,
  82. * "isRoot": true,
  83. * "title": "标题1",
  84. * "items": [
  85. * {
  86. * "text": "内容1"
  87. * },
  88. * {
  89. * "text": "内容2"
  90. * }
  91. * ]
  92. * }
  93. */
  94. if (row[pId] == node[id]){
  95. /**
  96. * 如果有items 直接放入
  97. */
  98. if (node.items){
  99. node.items.push(row);
  100. } else {
  101. node.items = [row];
  102. }
  103. pNodes.push(row);
  104. }
  105. }
  106. }
  107. return nodes;
  108. }
  109.  
  110. /**
  111. * Node 节点数据封装
  112. * @param {} list 转为map结构数据
  113. * @return {} list 需要转换的list
  114. */
  115. function convertToNodeList(list){
  116. $.each(list,function(i,e){
  117. e['title'] = e.NAME;
  118. e['isRoot'] = (e.PARENT_ID == '-1');
  119. e['isActive'] = (e.ENABLE_STATUS == '01');
  120. })
  121. return list;
  122. }
  123. //------------------------------------List Convert to Tree End----------------------------------------------------//
  124.   

JavaScript list转tree的更多相关文章

  1. 配置Tree Shaking来减少JavaScript的打包体积

    译者按: 用Tree Shaking技术来减少JavaScript的Payload大小 原文: Reduce JavaScript Payloads with Tree Shaking 译者: Fun ...

  2. 实用的树形菜单控件tree

     jQuery plugin: Treeview  这个插件能够把无序列表转换成可展开与收缩的Tree. jQuery plugin: Treeview  jQuery  jstree  jsTree ...

  3. MVC4中EasyUI Tree异步加载JSON数据生成树

      1,首先构造tree接受的格式化数据结构MODEL /// <summary> /// 定义EasyUI树的相关数据,方便控制器生成Json数据进行传递 /// </summar ...

  4. e3.tree参考手册

    简介 1. E3.Tree是E3平台下一个用于构造树型UI(menu,tree,outlookbar等)的的组件, E3.Tree 特色  部署简单,只需要把相关jar放到WEB-INF/lib目录 ...

  5. easyui struts后台实现tree返回json数据

    首先jsp页面有一ul用于展现tree <ul id="trueULid"></ul> 加载tree <script type="text/ ...

  6. EasyUI tree扩展获取实心节点

    <script type="text/javascript"> //扩展 获得tree 的实心节点 $(function(){ $.extend($.fn.tree.m ...

  7. EasyUI tree 异步树与采用扁平化实现的同步树

    所谓好记性不如烂笔头,为了以防忘记,才写下这篇博客,废话不多.. 异步树: tips:   可以采用easyui里的原始数据格式,也可以采用扁平化的数据格式. 使用场景: 当菜单模块数量庞大或者无限极 ...

  8. 使用jQuery开发tree插件

    1.插件截图 2.插件使用 首先引入jquery库,然后引入tree.js.tree.css文件,如下: <script type="text/javascript" src ...

  9. 12、jquery的tree组件

    1. <!--jquery 的主文件...--> <script type="text/javascript" src="../../js/jquery ...

随机推荐

  1. 有关Python的import...和from...import...的区别

    1.语法分析:首先from A import a1 是从A模块导入a1工具(可以是某个 函数,全局变量,类),import A是导入整个A模块的全部内容(包括全部的函数,全局变量,类). 2.内存分析 ...

  2. mysql数据库分库分表(Sharding)(转)

    mysql数据库切分 前言 通过MySQLReplication功能所实现的扩展总是会受到数据库大小的限制.一旦数据库过于庞大,尤其是当写入过于频繁,非常难由一台主机支撑的时候,我们还是会面临到扩展瓶 ...

  3. consul上删除已经注册的节点

    1,在consul上找到要删除的ID, 2,在consul的节点上删除这个ID:固定格式: 命令如果运行成功:没有任何的返回值 [root@beta-commonsrv01 ~] $curl --re ...

  4. Android:Recents和AMS中历史任务的区别

    1.1 任务和返回栈 - 实际数据模型  这个是指在调度体系里实际保存的TaskRecord实例,而ActivityRecord-TaskRecord-ActivityStack之间的关系建议看官方文 ...

  5. -bash: netstat: 未找到命令

    [root@localhost ~]# netstat -lunpt -bash: netstat: 未找到命令 [root@localhost ~]# yum -y install net-tool ...

  6. 阶段5 3.微服务项目【学成在线】_day17 用户认证 Zuul_12-用户退出-服务端

    实现退出 用户退出要以下动作: 1.删除redis中的token 2.删除cookie中的token controller内定义 spring securety config内放行 对这个url放行 ...

  7. Qt编写自定义控件50-迷你仪表盘

    一.前言 这个控件取名叫迷你仪表盘,是以为该控件可以缩小到很小很小的区域显示,非常适合小面积区域展示仪表数据使用,还可以手动触摸调节进度,是我个人觉得最漂亮小巧的一个控件.初次看到类似的控件是在一个音 ...

  8. xshell6破解4窗口限制

    资源路径: 链接: https://pan.baidu.com/s/11zumNoaIN1AF_YhmiPGWdA 提取码: nfs9 破解方法 先卸载系统中已经安装的xshell与xftp 然后安装 ...

  9. 单层反查BOM

    *&---------------------------------------------------------------------* *& Report YCX_001 * ...

  10. WPF引入OCX控件

    (方法一) https://www.cnblogs.com/guaniu/archive/2013/04/07/3006445.html (方法二) 1.先注册OCX控件:(有的把OCX 控件封装到E ...