原始数据:
// 原始数据
let dataSource = [
{ id: 1, pid: 0, name: '一级菜单A' },
{ id: 2, pid: 0, name: '一级菜单B' },
{ id: 3, pid: 0, name: '一级菜单C' },
{ id: 4, pid: 1, name: '二级菜单A-A' },
{ id: 5, pid: 1, name: '二级菜单A-B' },
{ id: 6, pid: 2, name: '二级菜单B-B' },
{ id: 7, pid: 2, name: '二级菜单B-C' },
{ id: 8, pid: 6, name: '三级菜单B-B-A' },
{ id: 9, pid: 6, name: '三级菜单B-B-B' },
];
目标数据:
// 目标数据
treeDataRes[
{
"id": 1,
"pid": 0,
"name": "一级菜单A",
"children": [
{
"id": 4,
"pid": 1,
"name": "二级菜单A-A"
},
{
"id": 5,
"pid": 1,
"name": "二级菜单A-B"
}
]
},
{
"id": 2,
"pid": 0,
"name": "一级菜单B",
"children": [
{
"id": 6,
"pid": 2,
"name": "二级菜单B-B",
"children": [
{
"id": 8,
"pid": 6,
"name": "三级菜单B-B-A"
},
{
"id": 9,
"pid": 6,
"name": "三级菜单B-B-B"
}
]
},
{
"id": 7,
"pid": 2,
"name": "二级菜单B-C"
}
]
},
{
"id": 3,
"pid": 0,
"name": "一级菜单C"
}
]
实现代码:
// js实现代码
// 生成树型结构函数
function treeData(source, id, parentId, children) {
// 深拷贝
// 利用JSON.stringify 将js对象序列化(JSON字符串),再使用JSON.parse来反序列化(还原)js对象;
// 序列化的作用是存储和传输
let cloneData = JSON.parse(JSON.stringify(source))
// filter() 方法创建一个新的数组,新数组中的元素是通过检查指定数组中符合条件的所有元素
return cloneData.filter(father => {
let branchArr = cloneData.filter(child => father[id] == child[parentId]);
branchArr.length > 0 ? father[children] = branchArr : ''
return father[parentId] == 0 // 表示第一层的parentId是0
})
}
// 调用,字段名以字符串的形式传参
let treeDataRes = treeData(dataSource, 'id', 'pid', 'children');
console.log(treeDataRes);