关于前端js处理扁平化数据变成tree结构 扁平化数据如下:
const data = [{
id: 2,
pid: 0,
path: '/course',
name: 'Course',
title: '课程管理'
}, {
id: 3,
pid: 2,
path: '/course',
name: 'Course',
title: '课程管理'
}, {
id: 4,
pid: 3,
path: '/course',
name: 'Course',
title: '课程管理'
}, {
id: 5,
pid: 2,
path: '/course',
name: 'Course',
title: '课程管理'
}, {
id: 6,
pid: 0,
path: '/course',
name: 'Course',
title: '人员管理'
}, {
id: 7,
pid: 6,
path: '/course',
name: 'Course',
title: '课程管理'
}, {
id: 8,
pid: 6,
path: '/course',
name: 'Course',
title: '课程管理'
}]
function formatDataTree(data) {
//拿到这个tree的所有顶级父级
let parents = data.filter((p) => {
return p.pid === 0
})
//拿到这个tree的所有子级
let children = data.filter((c) => {
return c.pid !== 0
})
function dataToTree(parents, children) {
//循环一下所有的顶级父级
parents.map((p) => {
//循环一下所有的子级
children.map((c) => {
//如果子级的pid等于父级的id
if (c.pid === p.id) {
//判断顶级父级有没有children
if (p.children) {
//有的话就push这个子级
p.children.push(c)
} else {
//否则的话就给这个顶级父级添加一个children,并且把这个子级添加给children
p.children = [c]
}
}
})
})
}
//处理元素之间的父子关系
dataToTree(parents, children)
console.log(parents);
}
formatDataTree(data)
使用递归来进行无限级树循环
function dataMax(data) {
//1.找出所有顶级父级
let parents = data.filter((p) => {
return p.pid === 0;
});
//2.找出所有子级
let children = data.filter((c) => {
return c.pid !== 0;
});
function FileToTreeData(parents, children) {
//先循环父级一共能循环两次
parents.map((p) => {
//每循环一次父级循环一次全部的子级
children.map((c,i) => {
//如果子级的pid等于当前父级的id的话
if (c.pid == p.id) {
//深拷贝一份子级数据
let _children = JSON.parse(JSON.stringify(children))
//从这份数据里把当前匹配出来的数据给删除掉
//原因是:删除掉以后当前这个拷贝的数据里就没有这个子级了,再进行递归操作的时候,第一个参数是当前匹配出来的子级
//,_children里就不会有当前这个c
_children.splice(i,1)
FileToTreeData([c],_children)
//如果当前这个父级p有children的话就把c给push进去
if (p.children) {
p.children.push(c);
} else {
//否则给当前父级p添加一个children把c塞进去
p.children = [c];
}
}
});
});
}
FileToTreeData(parents, children);
return parents;
}
console.log(dataMax(data));
最终处理结果