javascript将平行的拥有上下级关系的数据转换成树形结构
转换函数
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', //菜单编号，作为树形查找id
root:'root', //顶层节点的parentId是root
pid:'parentId',//父节点标识字段为parentId
child:'children',//构造出的树形子节点数组名为children
sort:{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将平行的拥有上下级关系的数据转换成树形结构的更多相关文章
- js将有父子关系的数据转换成树形结构数据
js将有父子关系的数据转换成树形结构数据 比如如下基本数据: let allDatas = [ { id: 3, name: 'bbbb', parendId: 1 }, { id: 2, name: ...
- Java编程：将具有父子关系的数据库表数据转换为树形结构，支持无限层级
在平时的开发工作中,经常遇到这样一个场景,在数据库中存储了具有父子关系的数据,需要将这些数据以树形结构的形式在界面上进行展示.本文的目的是提供了一个通用的编程模型,解决将具有父子关系的数据转换成树形结 ...
- JS 将有父子关系的数组转换成树形结构数据
将类似如下数据转换成树形的数据 [{ id: 1, name: '1', }, { id: 2, name: '1-1', parentId: 1 }, { id: 3, name: '1-1-1', ...
- dtree实现上下级关系的显示
在实际开发中我们常常要涉及到到在页面上显示上下级关系这样的需求 ,我的实现方法: 环境:S2SH+mysql 数据库结构如下图: 其中mgr字段是指经理,也就是自己的上一级 映射信息: Action和 ...
- 树状结构Java模型、层级关系Java模型、上下级关系Java模型与html页面展示
树状结构Java模型.层级关系Java模型.上下级关系Java模型与html页面展示 一.业务原型:公司的组织结构.传销关系网 二.数据库模型 很简单,创建 id 与 pid 关系即可.(pid:pa ...
- 20170907VS中EF模型文件.edmx文件上下级关系丢失问题
状态:A 电脑check in .edmx文件到TFS ,B 电脑vs下载如下文件 vs解决方案中此文件平级显示,原因:ADO.NET 数据模型创建的时候,会在工程文件 .csproj内增加文件层级关 ...
- sql上下级关系查询
有一张存在上下级关系的function表,parentId表示上级Id,现要查询出上级菜单下的子菜单,每个子菜单显示成以逗号分隔的字符串 表结构如下: create table menu ( id i ...
- javascript eval和JSON之间的关系
eval函数的工作原理 eval函数会评估一个给定的含有javascript代码的字符串,并且视图去执行包含在字符串里的表达式或者 一系列的合法的javascript语句.eval函数将把最后一个表达 ...
- JavaScript 构造树形结构的一种高效算法
引言 我们经常会碰到树形数据结构,比如组织层级.省市县或者动植物分类等等数据.下面是一个树形结构的例子: 在实际应用中,比较常见的做法是将这些信息存储为下面的结构,特别是当存在1对多的父/子节点关系时 ...
随机推荐
- git远程仓库、提交代码操作
初始化仓库 1.初始化 git init #或 git clone 远程仓库地址 git init 后续要添加远程仓库,git clone不需要再添加 2.连接仓库 git remote add 远程 ...
- JAVA学习（六）
今天先是把内存知识总结归纳地又学习了一遍,现在可以很清楚地描述JVM的内存是如何操作的了. 静态变量储存在方法区内存中,这个之前没有注意到,温故知新了. 如果一个引用是空的(就是指向null),那它在 ...
- <互联网时代>观感
<互联网时代>这部纪录片描绘了互联网从上世纪70年代到现在的整个发展过程,讲述了互联网带给我们生活的方方面面的变化,互联网技术在短短二,三十年的商业化浪潮中,以前所未有的速度谱写着改变世界 ...
- Effective C++ 总结笔记（六）
七.模板与泛型编程 41．了解隐式接口和编译器多态 1．类和模板都支持接口和多态. 2．类的接口是显式定义的--函数签名.多态是通过虚函数在运行期体现的. 3．模板的接口是隐式的(由模板函数的实现代码 ...
- OpenShift 本地开发环境配置(基于 Minishift)
本文要做什么? 很多为了验证应用在 OpenShift 平台的行为是否正常,或者组成一个简单的开发环境,直接搭建一个 OpenShift/Origin 环境可能太重了,而且运行在本机可能占用内存也太多 ...
- [loj3069]整点计数
1.基础知识 定义 定义1.1(高斯整数):$\mathbb{Z}[i]=\{a+bi\mid a,b\in Z\}$(其中$i$为虚数单位,即$i^{2}=-1$) 定义1.2(范数):$N(\al ...
- Identity Server 4 从入门到落地（二）—— 理解授权码模式
Identity Server 的目的是认证和授权,我们需要理解认证和授权的工作过程.这就需要了解OAuth 2.0的四种授权模式,下面这张图是授权码模式的工作过程,至少我在一开始看得一头雾水: 现在 ...
- Java设计模式之（十三）——模板方法模式
1.什么是模板模式? Define the skeleton of an algorithm in an operation, deferring some steps to subclasses. ...
- JSOI（联合省选）2021 划水记
流水账. Day 0 18:10 去本部拿准考证,结果发现已经没有人了./ruo 敲了几份板子,很早就去睡觉了. Day 1 7:30 到 NFLS 拿到准考证,几乎没有人来.于是做起了政治作业. 然 ...
- linux中conda升级R到4.0？
目录 前言 问题 曲线救国 前言 虽然我的win版本R已经用4了,但之前在Linux环境一直没用R4.0,因为Linux涉及的东西太多,担心不稳定,牵一发而动全身. 但现在有好些R包必须要用更新到R4 ...