Layui Tree 的 click 事件中 node 无 parent 字段,需基于初始化时传入的原始 treeData 数组,通过 id/pid 关系向上遍历获取父级;tree.getChecked() 非官方 API,getData() 返回快照不可用于路径推导。
tree.on('click') 回调里的 node 没有 parent 字段
直接访问 obj.node.parent 或 obj.node.parentnode 会得到 undefined —— layui tree 的 click 事件返回的 node 是精简副本,只含 id、title、checked 等基础字段,不携带父子引用。它不是原始数据的响应式代理,也不维护路径关系。
必须用原始 data 数组 + id/pid 关系向上遍历
你的树数据在初始化时传给 tree.render() 的那个扁平数组(比如叫 treeData),才是唯一可信的源。所有父级查找必须基于它,靠匹配 pid === 当前节点 id 一步步往上捞。
-
pid值需按实际约定判断:可能是0、null、undefined或空字符串,不能硬写pid !== 0 - 每次查找都用
Array.prototype.find(),避免修改原始数组或依赖 DOM 解析结果 - 返回的父节点数组顺序应是「根 → 直接父」,方便拼路径,所以用
unshift()而非push()
function getParents(treeData, nodeId) {
const parents = [];
let current = treeData.find(n => n.id === nodeId);
while (current && current.pid != null && current.pid !== 0) {
const parent = treeData.find(n => n.id === current.pid);
if (!parent) break;
parents.unshift(parent);
current = parent;
}
return parents;
}
tree.on('click', function(obj) {
const allParents = getParents(yourTreeData, obj.data.id);
const parentIds = allParents.map(p => p.id);
console.log('父级ID列表', parentIds);
});
为什么不能用 tree.getChecked() 或 setData 后的数据
tree.getChecked() 不是 Layui 官方 API,2.8.x 及之前所有稳定版均未提供该方法——你在控制台敲它大概率返回 undefined。而通过 tree.getData() 拿到的是当前渲染状态的快照,若树启用了 cascade: true(默认),子节点勾选会导致父节点 checked 字段被自动置为 true,但这个快照不含原始 pid 结构,无法反向推导层级路径。
- 真正能用于递归找父级的,只有初始化时传入的原始
treeData数组 - 如果用了异步加载(
lazy: true),注意此时原始数据可能只含顶层,需确保完整数据已就绪 - 多语言或动态菜单场景下,别把翻译后的
title当作 key 去查,始终认准id
layui-vue-admin 的 lay-tree 是另一套逻辑
如果你用的是 layui-vue-admin 中的 <lay-tree> 组件,它的 node 对象自带 parentNode 引用,可直接 while(node = node.parentNode) 遍历。但这和原生 Layui Tree 无关——两者数据结构、API 设计、事件参数完全不同,混用会出错。
最易被忽略的一点:父级 ID 列表是否包含“自身”取决于业务。上面的 getParents 函数只返回祖先,不包括点击节点本身;如需完整路径(根 → 当前),记得手动拼上 obj.data.id。


















