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

下载地址

csdn下载地址

服务端数据存储

当有多级菜单或者多级部门这样的场景的时候，传统的结构化数据设计都会用类似parentId来标识其父级，以达到多级树形结构存储于数据库中

服务端提供接口

服务端提供接口可以有两种模式

服务端将数据转换成树形的json传递给前端，如设计children字段存放下级数据
服务端按存储数据直接返回到前端

前端转换

如果服务端按照数据库存储的数据模型直接将数据传递给前端，那么前端使用一些树形菜单插件就不可直接使用，这时候中间就需要一层转换层来使数据适配，该方法就是用于此处

转换js代码

var Littlehow = {};
/*** littlehow 2019-05-15* 平行数据树形转换器* @type {{format: tree.format, sort: tree.sort, map: (function(*, *): {root, da})}}*/
Littlehow.tree = {/***  将平行结果转换成树形结构，父编号不可为空，如果为最高，则可以设置root等字样*  如果有排序字段，将排序完成后返回*  如：data:[{id:'1', parentId:'root', name:'test'}, {id:'2', parentId:'1', name:'test1'},{id:'3', parentId:'1', name:'test2'}]*     format:{id:'id', root:'root', 'pid':'parentId', child:'children'}*  解析后的数据形式为:*  [{id:'1','parentId':'root',name:'test', children:[{id:'2',parentId:'1',name:'test1'},{id:'3',parentId:'1',name:'test2'}]}]*  @param data   -- 需要转换的数据*  @param format -- 转换格式 {id:'', root:'', pid:'', child:'', sort:{field:'', direct:1}}*  @return {*} 转换后的数据*/format : function(data, format) {//如果data，没有数据，则将data原样返回if (!data || data.length <= 0) return data;var map = this.map(data, format);//再遍历原数据进行树形填充for (var i = 0, len = data.length; i < len; i++) {var d = data[i];if (map.dm[d[format.pid]]) {map.dm[d[format.pid]][format.child].push(d);}}//最后将root排序后返回this.sort(map.root, format);return map.root;},/*** 平行数据映射为map* @param data     -- 平行数据* @param format   -- tree格式化信息* @return {{d, root}}  -- 返回数据和根数据map*/map : function(data, format) {var dataMap = {};//全数据映射var root = [];//根for (var i = 0, len = data.length; i < len; i++) {var d = data[i];//初始化child字段,如果不想要这里初始化也可以在树形填充出进行判断初始化d[format.child] = [];dataMap[d[format.id]] = d;if (data[i][format.pid] === format.root) {//将root记录到root数组root.push(d);}}return {dm : dataMap, root : root};},/*** 进行排序  format.sort格式为sort:{field:'', direct:1},其中direct=1为正序，direct=-1为逆序* @param result  -- 结果集* @param format  -- 格式化*/sort : function(result, format) {if (!format.sort) return;//没有排序配置则不进行排序result.sort(function(a, b) {var as = a[format.sort.field];var bs = b[format.sort.field];return (as - bs) * format.sort.direct;});//如果result中有child，则继续进行排序for (var i = 0, len = result.length; i < len; i++) {if (result[i][format.child].length > 0) {this.sort(result[i][format.child], format);}}}
};

调用示例

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>tree case</title><script src="TreeUtils.js" type="application/javascript"></script><script type="application/javascript">var data = [{"menuName": "系统管理","parentId": "root","iconCls": "el-icon-s-tools","request": null,"leaf": "0","sortNo": 30,"menuId": "1"},{"menuName": "人员管理","parentId": "1","iconCls": null,"request": "/system/user","leaf": "1","sortNo": 3,"menuId": "2"},{"menuName": "角色管理","parentId": "1","iconCls": null,"request": "/system/role","leaf": "1","sortNo": 6,"menuId": "3"},{"menuName": "菜单管理","parentId": "1","iconCls": null,"request": "/system/menu","leaf": "1","sortNo": 9,"menuId": "4"},{"menuName": "系统配置","parentId": "1","iconCls": null,"request": "/system/config","leaf": "1","sortNo": 12,"menuId": "5"},{"menuName": "字典管理","parentId": "1","iconCls": null,"request": "/system/dictionary","leaf": "1","sortNo": 15,"menuId": "6"},{"menuName": "内容管理","parentId": "root","iconCls": "el-icon-tickets","request": null,"leaf": "0","sortNo": 18,"menuId": "21"},{"menuName": "banner","parentId": "21","iconCls": null,"request": "/content/banner","leaf": "1","sortNo": 3,"menuId": "22"},{"menuName": "公告列表","parentId": "21","iconCls": null,"request": "/content/attention","leaf": "1","sortNo": 9,"menuId": "23"},{"menuName": "App版本管理","parentId": "root","iconCls": "el-icon-tickets","request": null,"leaf": "0","sortNo": 27,"menuId": "91"},{"menuName": "App版本管理","parentId": "91","iconCls": null,"request": "/app/manager","leaf": "1","sortNo": 3,"menuId": "92"}];var format = {id:'menuId', //菜单编号，作为树形查找idroot:'root', //顶层节点的parentId是rootpid:'parentId',//父节点标识字段为parentIdchild:'children',//构造出的树形子节点数组名为childrensort:{field:'sortNo', direct:1}};//排序字段为sortNo，且正序var result = Littlehow.tree.format(data, format);console.log(result);document.write(JSON.stringify(result));</script>
</head>
<body></body>
</html>

输出结果如下

[{"menuName": "内容管理","parentId": "root","iconCls": "el-icon-tickets","request": null,"leaf": "0","sortNo": 18,"menuId": "21","children": [{"menuName": "banner","parentId": "21","iconCls": null,"request": "/content/banner","leaf": "1","sortNo": 3,"menuId": "22","children": []}, {"menuName": "公告列表","parentId": "21","iconCls": null,"request": "/content/attention","leaf": "1","sortNo": 9,"menuId": "23","children": []}]
}, {"menuName": "App版本管理","parentId": "root","iconCls": "el-icon-tickets","request": null,"leaf": "0","sortNo": 27,"menuId": "91","children": [{"menuName": "App版本管理","parentId": "91","iconCls": null,"request": "/app/manager","leaf": "1","sortNo": 3,"menuId": "92","children": []}]
}, {"menuName": "系统管理","parentId": "root","iconCls": "el-icon-s-tools","request": null,"leaf": "0","sortNo": 30,"menuId": "1","children": [{"menuName": "人员管理","parentId": "1","iconCls": null,"request": "/system/user","leaf": "1","sortNo": 3,"menuId": "2","children": []}, {"menuName": "角色管理","parentId": "1","iconCls": null,"request": "/system/role","leaf": "1","sortNo": 6,"menuId": "3","children": []}, {"menuName": "菜单管理","parentId": "1","iconCls": null,"request": "/system/menu","leaf": "1","sortNo": 9,"menuId": "4","children": []}, {"menuName": "系统配置","parentId": "1","iconCls": null,"request": "/system/config","leaf": "1","sortNo": 12,"menuId": "5","children": []}, {"menuName": "字典管理","parentId": "1","iconCls": null,"request": "/system/dictionary","leaf": "1","sortNo": 15,"menuId": "6","children": []}]
}]

javascript将平行的拥有上下级关系的数据转换成树形结构相关推荐

python画父子关系图_将有父子关系的一维数组转换成树形结构(多维)数据
先来个函数注释 : /** * 将有父子关系的一维数组转换成树形结构(多维)数据 * console.log(JSON.stringify(setTreeData(data), null, 2)); ...
mysql 父子维,将有父子关系的一维数组转换成树形结构(多维)数据
拉莫斯之舞先来个函数注释 :/** * 将有父子关系的一维数组转换成树形结构(多维)数据 * console.log(JSON.stringify(setTreeData(data), null, ...
python list转换成树形结构_列表数据（包含父节点关系）转化为树形结构
今天开发遇到一个需求,就是把包含父子关系的数据转化为树形结构,这个需求来自我开发的一个功能,前端需要使用 Element 的级联选择器实现行业级联选择的功能. 列表数据类型每条数据都列出了其父 id ...
java父子表_Java编程：将具有父子关系的数据库表数据转换为树形结构，支持无限层级...
在平时的开发工作中,经常遇到这样一个场景,在数据库中存储了具有父子关系的数据,需要将这些数据以树形结构的形式在界面上进行展示.本文的目的是提供了一个通用的编程模型,解决将具有父子关系的数据转换成树形结 ...
软件设计：表达组织中的上下级关系
正在策划一个产品,其中要用到企业中人员的上下级关系. 上下级关系,直觉上只是个简单的树状结构,如果不深入思考,容易将之简单化,其实,这里面还是有很多麻烦事的.例如,有些企业,某些人的上级不止一个,属于 ...
好程序员前端教程之JavaScript闭包和匿名函数的关系详解...
好程序员前端教程之JavaScript闭包和匿名函数的关系详解本文讲的是关于JavaScript闭包和匿名函数两者之间的关系,从匿名函数概念到立即执行函数,最后到闭包.下面一起来看看文章分析,希望你 ...
JavaScript学习（十三）—节点关系
JavaScript学习(十三)-节点关系 1.childNodes属性作用:该属性的作用是获取元素节点下面的所有的子节点,包含空白节点 <body><ul><li&g ...
阅读小课堂：【程序员职场关系商】关系基本盘、破冰式求助、点头之交的中立同事本质、盟友、和你的领导互通信号（好的上下级关系、什么样的领导不值得跟、职场的竞争不是战场而是秀场即开放性竞争）
文章目录 I .关系商 1.1 关系基本盘 1.2 破冰式求助 1.3 点头之交的中立同事本质 1.4 盟友 1.5 和你的领导互通信号 1.5.1 好的上下级关系 1.5.2 什么样的领导不值得跟? ...
PHP分销推广如何确立上下级关系,【解决方案+问题分析】微信分销会员上下级关系出现混乱，剖析全过程...
微信分销会员上下级关系出现混乱,从反馈到分析问题如何发生 ,再到如果解决.在此把实际项目遇到的问题分享出来,以供以后和网友参考. 某日,接到一通领导打来的一通电话.电话主要内容是他曾接到一个用户的反馈 ...

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

下载地址

服务端数据存储

服务端提供接口

前端转换

转换js代码

调用示例

输出结果如下

javascript将平行的拥有上下级关系的数据转换成树形结构相关推荐

最新文章

热门文章