数据结构
树数据
[{
"id": 1,
"name": "1级1",
"pid": 0,
"children": [{
"id": 3,
"name": "1级1-1",
"pid": 1
}]
}, {
"id": 2,
"name": "2级1",
"pid": 0,
"children": [{
"id": 5,
"name": "2级1-1",
"pid": 2
}]
}, {
"id": 6,
"name": "3级1",
"pid": 0,
"children": [{
"id": 8,
"name": "1级1-1-1-1",
"pid": 6
}]
}]
数组数据
[
{
"id": 1,
"name": "1级1",
"pid": 0
},
{
"id": 3,
"name": "1级1-1",
"pid": 1
},
{
"id": 2,
"name": "2级1",
"pid": 0
},
{
"id": 5,
"name": "2级1-1",
"pid": 2
},
{
"id": 6,
"name": "3级1",
"pid": 0
},
{
"id": 8,
"name": "1级1-1-1-1",
"pid": 6
}
]
源码:
<script>
const array = [
{
'id': 1,
'name': '1级1',
'pid': 0
},
{
'id': 2,
'name': '2级1',
'pid': 0
},
{
'id': 3,
'name': '1级1-1',
'pid': 1
},
{
'id': 4,
'name': '1级1-1-1',
'pid': 4
},
{
'id': 5,
'name': '2级1-1',
'pid': 2
},
{
'id': 6,
'name': '3级1',
'pid': 0
},
{
'id': 7,
'name': '3级1-1',
'pid': 13
},
{
'id': 8,
'name': '1级1-1-1-1',
'pid': 6
}
]
// 开始递归创建树结构数据-方法
function arrayToTree(array) {
var map = {}; //存着每一个层级的引用,以id为key,方便查找
var result = [];
for(var i = 0; i < array.length; i++) {
var obj = array[i];
var clone = JSON.parse(JSON.stringify(obj));
//如果需要改字段名,请在这里添加代码进行修改
if(obj.pid == 0) {
result.push(clone);
}
map[clone.id] = clone;
if(map[clone.pid]) {
if(!map[clone.pid].children) map[clone.pid].children = [];
map[clone.pid].children.push(clone);
}
}
return result;
}
// 调用方法, temp为原始数据, result为树形结构数据
var treeData = arrayToTree(array)
console.log(treeData)
//=========================================================
//将树结构数据还原成普通数组数据
/*field 定义children字段名称*/
function treeToArray(treeData, field) {
var result = [];
if(!field) field = "children";
for(var key in treeData) {
var obj = treeData[key];
var clone = JSON.parse(JSON.stringify(obj));
delete clone[field];
result.push(clone);
//
if(obj[field]) {
var tmp = treeToArray(obj[field], field);
result = result.concat(tmp);
}
}
return result;
}
console.log(treeToArray(treeData,"children"));
</script>