const data = [
{ id: 1, pId: 0, name: '系统管理' },
{ id: 2, pId: 0, name: '权限管理' },
{ id: 3, pId: 0, name: '设备管理' },
{ id: 4, pId: 2, name: '用户管理' },
{ id: 5, pId: 4, name: '用户列表' },
{ id: 6, pId: 4, name: '用户添加' },
{ id: 12, pId: 2, name: '角色管理' },
{ id: 13, pId: 12, name: '角色列表' },
{ id: 14, pId: 12, name: '角色添加' },
{ id: 20, pId: 1, name: '日志管理' },
{ id: 21, pId: 20, name: '日志列表' },
{ id: 24, pId: 20, name: '日志编辑' },
{ id: 28, pId: 1, name: '菜单管理' },
{ id: 29, pId: 28, name: '菜单列表' },
{ id: 30, pId: 28, name: '菜单添加' }
];
const treeData = tree(data);
console.log('data', data)
console.log('treeData', treeData)
/**
* 生成二叉树
* @param arr 原数据
* @param pid 父级属性
* @param firstId 父级的顶级值
* return 二叉树数据
*/
function tree(arr, pid = 'pId', firstId = 0) {
// 拷贝原数据
const arrData = JSON.parse(JSON.stringify(arr));
// 生成结果
const treeData = [];
// 用于递归归位
const fun = (data, obj) => {
// 顶级
if (obj[pid] == firstId) treeData.push(obj);
// 非顶级
else {
for (let i = 0; i < data.length; i++) {
if (data[i].id == obj[pid]) {
data[i].children.push(obj);
break;
} else {
fun(data[i].children, obj);
}
}
}
}
// 先排序pid防止错乱,再遍历
arrData.sort((a, b) => { return a[pid] - b[pid] })
for (let i = 0; i < arrData.length; i++) {
const d = {
...arrData[i],
children: []
}
fun(treeData, d);
}
return treeData;
}
js生成二叉树
于 2022-07-27 14:02:09 首次发布