后台返回数据是一行一行的,但是前端展示要树形结构数据,所以需要我们自己处理函数了,小编在此献丑了,小写一个简便函数供大家参考,希望反馈一下。
返回数据格式 :
var list = [
{ name: '根目录1' , id: 1, parentId: 0 },
{ name: '根目录2' , id: 2, parentId: 0 },
{ name: '目录1-1' , id: 3, parentId: 1 },
{name: '目录1-2' , id: 4, parentId: 1 },
{name: '目录2-1' , id: 5, parentId: 2 },
{name: '目录1-2-1' , id: 6, parentId: 4 }
];
看到数据格式,大家很明白,name用来显示的,id是唯一值,parentId是父目录的id,而且第一级的父id为0;所以根据这个我们就可以组装了,函数如下
function arrayToTree(arr, parentId) {
// arr 是返回的数据 parendId 父id
let temp = [];
let treeArr = arr;
((item, index) => {
if ( == parentId) {
if (arrayToTree(treeArr, treeArr[index].id).length > 0) {
// 递归调用此函数
treeArr[index].children = arrayToTree(treeArr, treeArr[index].id);
}
(treeArr[index]);
}
});
return temp;
}
(arrayToTree(list , 0)); // 第一级的父目录id是0;写死调用
// [{ name: ‘根目录1’ , id: 1: parentId: 0 , children:[{ name: ‘目录1-1’ , id: 3: parentId: 1 },{ name: ‘目录1-2’ , id: 4: parentId: 1 , children:[{name: ‘目录1-2-1’ , id: 6, parentId: 4 }]}]},
{ name: ‘根目录2’ , id: 2: parentId: 0 , children:[{ name: ‘目录2-1’ , id: 5: parentId: 2 } ]}
]