在处理数据时,要将后端返回的扁平结构数据转换为树形结构,便于配合vue的tree组件,网上查找了一个方法,这里做一下记录。
注:非原创,时间太长原文地址找不到了,望原作者看到后告知。
/**
* 扁平数据结构转换为树形结构
* @param data {Array} 扁平结构数组
* @param cfg {Object} 转换依据及处理节点对象
* @returns {Array} 树形结构数组
*/
function toTree(data, cfg) {
if (!data) {
return;
}
let nodes = {};
let parentNodes = {};
let prop = Object.assign({
rootId: 'root',
id: 'id',
parentId: 'parentId',
children: 'children',
leaf: 'leaf'
}, cfg);
data.forEach((node) => {
let id = node[prop.id];
let parentId = node[prop.parentId] || prop.rootId;
nodes[id] = node; // 放进节点map中
if (parentId) {
parentNodes[parentId] = parentNodes[parentId] || [];
parentNodes[parentId].push(node);
}
});
for (let id in nodes) {
let node = nodes[id];
// 设置自节点和叶子节点属性
if (parentNodes[id]) {
node[prop.children] = parentNodes[id];
} else {
node[prop.leaf] = true;
}
}
return parentNodes[prop.rootId];
}
使用
let data = [{
"id": "3",
"title": "第一课时",
"parentId": "2"
},
{
"id": "2",
"title": "第一节",
"parentId": "1"
}, {
"id": "1",
"title": "第一章",
"parentId": ""
}
]
let arr = toTree(data)
输出
[{
id: '1',
title: '第一章',
parentId: '',
children: [{
id: '2',
title: '第一章',
parentId: '1',
children: [{
id: '3',
title: '第一章',
parentId: '2',
leaf: true
}]
}]
}]