layui tree 无 tree.getspread() 方法,因其展开状态仅为 dom class 切换,未同步至 js 数据层;需递归遍历原始数据,筛选 spread: true 节点 id 并手动维护状态。
tree.getchecked() 拿不到展开节点,layui tree 没有内置 api 直接返回「所有已展开节点的 id 列表」;必须手动遍历原始树数据,靠 spread: true 字段筛选。
为什么 tree.getSpread() 不存在
Layui 的 Tree 组件从 2.5.x 到 2.8+ 都没提供类似 tree.getSpread('treeId') 的方法。它的内部状态只维护了 checkbox 的勾选(通过 checked 字段),而展开/收起(spread)是纯 UI 状态,不触发事件、不缓存、也不暴露读取接口。你看到的展开图标变化,只是 DOM class 切换,没有同步到 JS 数据层。
如何从原始数据中提取所有 spread: true 的节点 ID
关键前提是:你渲染树时传入的原始数据数组(比如叫 treeData)必须还保留在作用域里——不能只依赖 DOM 解析或 tree.getData(),因为后者在某些版本中返回的是浅拷贝或结构不完整数据。
- 用递归函数遍历整个
treeData,检查每个节点是否含spread: true - 注意:子节点的
spread状态独立于父节点,即使父节点没展开,子节点也可能被手动点开(取决于渲染时是否设了spread: true) - 如果节点本身没有
spread字段,默认视为false,不要误判为展开
function getSpreadIds(data, result = []) {
if (!Array.isArray(data)) return result;
data.forEach(node => {
if (node.spread === true) {
result.push(node.id);
}
if (Array.isArray(node.children)) {
getSpreadIds(node.children, result);
}
});
return result;
}
// 调用示例(假设 treeData 是你 render 时传入的原始数据)
const spreadIds = getSpreadIds(treeData); // 返回 [1, 4, 5, 11]
监听展开/收起动作并动态更新展开 ID 列表
Tree 组件不触发专门的展开事件,但你可以监听点击 .layui-icon-addition 和 .layui-icon-subtraction 图标的行为,再结合节点 ID 做增量更新:
- 给树容器加事件委托:
document.querySelector('#treeContainer').addEventListener('click', e => { ... }) - 判断
e.target.classList.contains('layui-icon-addition')或'layui-icon-subtraction' - 向上找最近的
.layui-tree-pack元素,再从其data-id属性取节点 ID - 手动翻原始数据,设置对应节点的
spread字段,再调用getSpreadIds()重算
这个方式适合需要实时响应的场景,但要注意:用户右键“展开全部”、或代码调用 tree.expandAll() 不会触发 click,所以仍需 fallback 到全量扫描原始数据。
最易被忽略的一点:Layui 渲染后,原始数据里的 spread 字段不会自动同步更新——你手动点开一个节点,DOM 变了,但 treeData[0].children[0].spread 还是初始值。如需持久化状态,得在点击时自己改原始数据,否则每次调用 getSpreadIds() 都只能反映初始化时的展开配置。











