转换函数

  1. var Littlehow = {};
  2. /**
  3.  * littlehow 2019-05-15
  4.  * 平行数据树形转换器
  5.  * @type {{format: tree.format, sort: tree.sort, map: (function(*, *): {root, da})}}
  6.  */
  7. Littlehow.tree = {
  8.     /**
  9.      *  将平行结果转换成树形结构，父编号不可为空，如果为最高，则可以设置root等字样
  10.      *  如果有排序字段，将排序完成后返回
  11.      *  如：data:[{id:'1', parentId:'root', name:'test'}, {id:'2', parentId:'1', name:'test1'},{id:'3', parentId:'1', name:'test2'}]
  12.      *     format:{id:'id', root:'root', 'pid':'parentId', child:'children'}
  13.      *  解析后的数据形式为:
  14.      *  [{id:'1','parentId':'root',name:'test', children:[{id:'2',parentId:'1',name:'test1'},{id:'3',parentId:'1',name:'test2'}]}]
  15.      *  @param data   -- 需要转换的数据
  16.      *  @param format -- 转换格式 {id:'', root:'', pid:'', child:'', sort:{field:'', direct:1}}
  17.      *  @return {*} 转换后的数据
  18.      */
  19.     format : function(data, format) {
  20.         //如果data，没有数据，则将data原样返回
  21.         if (!data || data.length <= 0) return data;
  22.         var map = this.map(data, format);
  23.         //再遍历原数据进行树形填充
  24.         for (var i = 0, len = data.length; i < len; i++) {
  25.             var d = data[i];
  26.             if (map.dm[d[format.pid]]) {
  27.                 map.dm[d[format.pid]][format.child].push(d);
  28.             }
  29.         }
  30.         //最后将root排序后返回
  31.         this.sort(map.root, format);
  32.         return map.root;
  33.     },
  34.     /**
  35.      * 平行数据映射为map
  36.      * @param data     -- 平行数据
  37.      * @param format   -- tree格式化信息
  38.      * @return {{d, root}}  -- 返回数据和根数据map
  39.      */
  40.     map : function(data, format) {
  41.         var dataMap = {};//全数据映射
  42.         var root = [];//根
  43.         for (var i = 0, len = data.length; i < len; i++) {
  44.             var d = data[i];
  45.             //初始化child字段,如果不想要这里初始化也可以在树形填充出进行判断初始化
  46.             d[format.child] = [];
  47.             dataMap[d[format.id]] = d;
  48.             if (data[i][format.pid] === format.root) {//将root记录到root数组
  49.                 root.push(d);
  50.             }
  51.         }
  52.         return {dm : dataMap, root : root};
  53.     },
  54.     /**
  55.      * 进行排序  format.sort格式为sort:{field:'', direct:1},其中direct=1为正序，direct=-1为逆序
  56.      * @param result  -- 结果集
  57.      * @param format  -- 格式化
  58.      */
  59.     sort : function(result, format) {
  60.         if (!format.sort) return;//没有排序配置则不进行排序
  61.         result.sort(function(a, b) {
  62.             var as = a[format.sort.field];
  63.             var bs = b[format.sort.field];
  64.             return (as - bs) * format.sort.direct;
  65.         });
  66.         //如果result中有child，则继续进行排序
  67.         for (var i = 0, len = result.length; i < len; i++) {
  68.             if (result[i][format.child].length > 0) {
  69.                 this.sort(result[i][format.child], format);
  70.             }
  71.         }
  72.     }
  73. };

　　

调用示例

  1. <!DOCTYPE html>
  2. <html lang="en">
  3. <head>
  4.     <meta charset="UTF-8">
  5.     <title>tree case</title>
  6.     <script src="TreeUtils.js" type="application/javascript"></script>
  7.     <script type="application/javascript">
  8.         var data = [
  9.             {
  10.                 "menuName": "系统管理",
  11.                 "parentId": "root",
  12.                 "iconCls": "el-icon-s-tools",
  13.                 "request": null,
  14.                 "leaf": "0",
  15.                 "sortNo": 30,
  16.                 "menuId": "1"
  17.             },
  18.             {
  19.                 "menuName": "人员管理",
  20.                 "parentId": "1",
  21.                 "iconCls": null,
  22.                 "request": "/system/user",
  23.                 "leaf": "1",
  24.                 "sortNo": 3,
  25.                 "menuId": "2"
  26.             },
  27.             {
  28.                 "menuName": "角色管理",
  29.                 "parentId": "1",
  30.                 "iconCls": null,
  31.                 "request": "/system/role",
  32.                 "leaf": "1",
  33.                 "sortNo": 6,
  34.                 "menuId": "3"
  35.             },
  36.             {
  37.                 "menuName": "菜单管理",
  38.                 "parentId": "1",
  39.                 "iconCls": null,
  40.                 "request": "/system/menu",
  41.                 "leaf": "1",
  42.                 "sortNo": 9,
  43.                 "menuId": "4"
  44.             },
  45.             {
  46.                 "menuName": "系统配置",
  47.                 "parentId": "1",
  48.                 "iconCls": null,
  49.                 "request": "/system/config",
  50.                 "leaf": "1",
  51.                 "sortNo": 12,
  52.                 "menuId": "5"
  53.             },
  54.             {
  55.                 "menuName": "字典管理",
  56.                 "parentId": "1",
  57.                 "iconCls": null,
  58.                 "request": "/system/dictionary",
  59.                 "leaf": "1",
  60.                 "sortNo": 15,
  61.                 "menuId": "6"
  62.             },
  63.             {
  64.                 "menuName": "内容管理",
  65.                 "parentId": "root",
  66.                 "iconCls": "el-icon-tickets",
  67.                 "request": null,
  68.                 "leaf": "0",
  69.                 "sortNo": 18,
  70.                 "menuId": "21"
  71.             },
  72.             {
  73.                 "menuName": "banner",
  74.                 "parentId": "21",
  75.                 "iconCls": null,
  76.                 "request": "/content/banner",
  77.                 "leaf": "1",
  78.                 "sortNo": 3,
  79.                 "menuId": "22"
  80.             },
  81.             {
  82.                 "menuName": "公告列表",
  83.                 "parentId": "21",
  84.                 "iconCls": null,
  85.                 "request": "/content/attention",
  86.                 "leaf": "1",
  87.                 "sortNo": 9,
  88.                 "menuId": "23"
  89.             },
  90.             {
  91.                 "menuName": "App版本管理",
  92.                 "parentId": "root",
  93.                 "iconCls": "el-icon-tickets",
  94.                 "request": null,
  95.                 "leaf": "0",
  96.                 "sortNo": 27,
  97.                 "menuId": "91"
  98.             },
  99.             {
  100.                 "menuName": "App版本管理",
  101.                 "parentId": "91",
  102.                 "iconCls": null,
  103.                 "request": "/app/manager",
  104.                 "leaf": "1",
  105.                 "sortNo": 3,
  106.                 "menuId": "92"
  107.             }
  108.         ];
  109.  
  110.         var format = {
  111.             id:'menuId', //菜单编号，作为树形查找id
  112.             root:'root', //顶层节点的parentId是root
  113.             pid:'parentId',//父节点标识字段为parentId
  114.             child:'children',//构造出的树形子节点数组名为children
  115.             sort:{field:'sortNo', direct:1}};//排序字段为sortNo，且正序
  116.  
  117.         var result = Littlehow.tree.format(data, format);
  118.         console.log(result);
  119.         document.write(JSON.stringify(result));
  120.     </script>
  121. </head>
  122. <body>
  123.  
  124. </body>
  125. </html>

　　

输出结果如下

  1. [{
  2. 	"menuName": "内容管理",
  3. 	"parentId": "root",
  4. 	"iconCls": "el-icon-tickets",
  5. 	"request": null,
  6. 	"leaf": "0",
  7. 	"sortNo": 18,
  8. 	"menuId": "21",
  9. 	"children": [{
  10. 		"menuName": "banner",
  11. 		"parentId": "21",
  12. 		"iconCls": null,
  13. 		"request": "/content/banner",
  14. 		"leaf": "1",
  15. 		"sortNo": 3,
  16. 		"menuId": "22",
  17. 		"children": []
  18. 	}, {
  19. 		"menuName": "公告列表",
  20. 		"parentId": "21",
  21. 		"iconCls": null,
  22. 		"request": "/content/attention",
  23. 		"leaf": "1",
  24. 		"sortNo": 9,
  25. 		"menuId": "23",
  26. 		"children": []
  27. 	}]
  28. }, {
  29. 	"menuName": "App版本管理",
  30. 	"parentId": "root",
  31. 	"iconCls": "el-icon-tickets",
  32. 	"request": null,
  33. 	"leaf": "0",
  34. 	"sortNo": 27,
  35. 	"menuId": "91",
  36. 	"children": [{
  37. 		"menuName": "App版本管理",
  38. 		"parentId": "91",
  39. 		"iconCls": null,
  40. 		"request": "/app/manager",
  41. 		"leaf": "1",
  42. 		"sortNo": 3,
  43. 		"menuId": "92",
  44. 		"children": []
  45. 	}]
  46. }, {
  47. 	"menuName": "系统管理",
  48. 	"parentId": "root",
  49. 	"iconCls": "el-icon-s-tools",
  50. 	"request": null,
  51. 	"leaf": "0",
  52. 	"sortNo": 30,
  53. 	"menuId": "1",
  54. 	"children": [{
  55. 		"menuName": "人员管理",
  56. 		"parentId": "1",
  57. 		"iconCls": null,
  58. 		"request": "/system/user",
  59. 		"leaf": "1",
  60. 		"sortNo": 3,
  61. 		"menuId": "2",
  62. 		"children": []
  63. 	}, {
  64. 		"menuName": "角色管理",
  65. 		"parentId": "1",
  66. 		"iconCls": null,
  67. 		"request": "/system/role",
  68. 		"leaf": "1",
  69. 		"sortNo": 6,
  70. 		"menuId": "3",
  71. 		"children": []
  72. 	}, {
  73. 		"menuName": "菜单管理",
  74. 		"parentId": "1",
  75. 		"iconCls": null,
  76. 		"request": "/system/menu",
  77. 		"leaf": "1",
  78. 		"sortNo": 9,
  79. 		"menuId": "4",
  80. 		"children": []
  81. 	}, {
  82. 		"menuName": "系统配置",
  83. 		"parentId": "1",
  84. 		"iconCls": null,
  85. 		"request": "/system/config",
  86. 		"leaf": "1",
  87. 		"sortNo": 12,
  88. 		"menuId": "5",
  89. 		"children": []
  90. 	}, {
  91. 		"menuName": "字典管理",
  92. 		"parentId": "1",
  93. 		"iconCls": null,
  94. 		"request": "/system/dictionary",
  95. 		"leaf": "1",
  96. 		"sortNo": 15,
  97. 		"menuId": "6",
  98. 		"children": []
  99. 	}]
  100. }]

　　

javascript将平行的拥有上下级关系的数据转换成树形结构的更多相关文章

  1. js将有父子关系的数据转换成树形结构数据

    js将有父子关系的数据转换成树形结构数据 比如如下基本数据: let allDatas = [ { id: 3, name: 'bbbb', parendId: 1 }, { id: 2, name: ...

  2. Java编程：将具有父子关系的数据库表数据转换为树形结构，支持无限层级

    在平时的开发工作中,经常遇到这样一个场景,在数据库中存储了具有父子关系的数据,需要将这些数据以树形结构的形式在界面上进行展示.本文的目的是提供了一个通用的编程模型,解决将具有父子关系的数据转换成树形结 ...

  3. JS 将有父子关系的数组转换成树形结构数据

    将类似如下数据转换成树形的数据 [{ id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1', ...

  4. dtree实现上下级关系的显示

    在实际开发中我们常常要涉及到到在页面上显示上下级关系这样的需求 ,我的实现方法: 环境:S2SH+mysql 数据库结构如下图: 其中mgr字段是指经理,也就是自己的上一级 映射信息: Action和 ...

  5. 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示

    树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...

  6. 20170907VS中EF模型文件.edmx文件上下级关系丢失问题

    状态:A 电脑check in .edmx文件到TFS ,B 电脑vs下载如下文件 vs解决方案中此文件平级显示,原因:ADO.NET 数据模型创建的时候,会在工程文件 .csproj内增加文件层级关 ...

  7. sql上下级关系查询

    有一张存在上下级关系的function表,parentId表示上级Id,现要查询出上级菜单下的子菜单,每个子菜单显示成以逗号分隔的字符串 表结构如下: create table menu ( id i ...

  8. javascript eval和JSON之间的关系

    eval函数的工作原理 eval函数会评估一个给定的含有javascript代码的字符串,并且视图去执行包含在字符串里的表达式或者 一系列的合法的javascript语句.eval函数将把最后一个表达 ...

  9. JavaScript 构造树形结构的一种高效算法

    引言 我们经常会碰到树形数据结构,比如组织层级.省市县或者动植物分类等等数据.下面是一个树形结构的例子: 在实际应用中,比较常见的做法是将这些信息存储为下面的结构,特别是当存在1对多的父/子节点关系时 ...

随机推荐

  1. go闭包使用

    1.带参数闭包函数 func main() { //先调用闭包外面的方法传给变量 add_func := add(1, 2) //再调用里面的方法,因为有了i++ 同一个内存地址 在一次编译中i的值会 ...

  2. 用C++实现俄罗斯方块(Tetris)游戏

    我是一个C++初学者,控制台实现了一个俄罗斯方块游戏. 代码如下: //"俄罗斯方块"V1.0 //李国良于2017年1月20日编写完成 #include <iostream ...

  3. 手把手教你基于Netty实现一个基础的RPC框架（通俗易懂）

    阅读这篇文章之前,建议先阅读和这篇文章关联的内容. [1]详细剖析分布式微服务架构下网络通信的底层实现原理(图解) [2][年薪60W的技巧]工作了5年,你真的理解Netty以及为什么要用吗?(深度干 ...

  4. 🏆【Alibaba中间件技术系列】「RocketMQ技术专题」小白专区之领略一下RocketMQ基础之最！

    应一些小伙伴们的私信,希望可以介绍一下RocketMQ的基础,那么我们现在就从0开始,进入RocketMQ的基础学习及概念介绍,为学习和使用RocketMQ打好基础! RocketMQ的定位 Rock ...

  5. Python编程环境设置

    第1节.Python编程环境设置 一.sublime相关 1.sublime REPL插件安装 (1)安装 先打开插件安装面板:ctrl+shift+P 输入install ,选择Package Co ...

  6. vue3 学习笔记 (五)——vue3 的 setup 如何实现响应式功能？

    setup 是用来写组合式 api ,内部的数据和方法需要通过 return 之后,模板才能使用.在之前 vue2 中,data 返回的数据,可以直接进行双向绑定使用,如果我们把 setup 中数据类 ...

  7. [hdu6997]愿望幽灵

    约定:$[x^{n}]F(x)$​​​​​​表示多项式$F$​​​​​​的$n$​​​​​​次项系数 对于多项式$F$​​​​​​,定义$F$​​​​​的复合逆$\hat{F}$​​​​​为满足$F( ...

  8. 你有没有觉得邮件发送人固定配置在yml文件中是不妥当的呢？SpringBoot 动态设置邮件发送人

    明月当天,不知道你有没有思念的人 前言 之前其实已经写过SpringBoot异步发送邮件,但是今天在一个小项目中要用到发送邮件时,我突然觉得邮件发送人只有一个,并且固定写在yml文件中,就是非常的不妥 ...

  9. [源码解析] PyTorch 分布式 Autograd (2) ---- RPC基础

    [源码解析] PyTorch 分布式 Autograd (2) ---- RPC基础 目录 [源码解析] PyTorch 分布式 Autograd (2) ---- RPC基础 0x00 摘要 0x0 ...

  10. Codeforces 923E - Perpetual Subtraction（微积分+生成函数+推式子+二项式反演+NTT）

    Codeforces 题目传送门 & 洛谷题目传送门 神仙题 %%%%%%%%%%%%%%%%%%%%%%%%%%%%%% 首先考虑最朴素的 \(dp\),设 \(dp_{z,i}\) 表示经 ...