做项目的时候我们可能会需要到点击树,然后获取到当前节点的层级结构数据,比如点击5级显示,1级-2级-3级-4级-5级 这种,用于显示层级,主要思路就时递归,递归获取当前节点,获取当前父节点,直到找到顶级的父节点为止。
let treedata = [
{
id: 174,
name: '全部',
parentId: 0,
children: [
{
id: 1,
name: 'label-1',
parentId: 174,
children: [
{
id: 3,
name: 'label-1-2',
parentId: 1,
children: [
{
id: 4,
name: 'label1-2-3',
parentId: 3,
children: []
},
{
id: 5,
name: 'label-1-2-5',
parentId: 3,
children: []
}
]
}
]
},
{
id: 2,
name: 'label-2',
parentId: 174,
children: [
{
id: 6,
name: 'label-2-6',
parentId: 2,
children: []
}
]
}
]
}
];
const ID = 5; // 当前节点ID
const resultList= []; // 结果
const topPid = 0; // 顶级父节点ID
const data = treedata; // 树数据
// 根据id取当前节点
const getNode = (data, id) => {
let result = null; // 运行结果
function getTreeItem (data, id) {
data.map(item => {
if (item.id == id) {
result = item; // 结果赋值
} else {
if (item.children) {
getTreeItem(item.children, id);
}
}
});
}
getTreeItem(data, id);
return result;
};
// 获取层级数据
function getLevelList (id) {
let currentId = id;
let node = getNode(data, currentId);
resultList.push(node);
if (node && node.parentId && node.parentId !== topPid) {
getLevelList(node.parentId);
}
}
getLevelList(ID);
console.log('结果数组', resultList);
版权声明:本文为CodingNoob原创文章,遵循 CC 4.0 BY-SA 版权协议,转载请附上原文出处链接和本声明。