layui tree 的 getChecked 返回空数组是因为未启用复选功能,需初始化时设置 check: true,且节点数据中要有 checked 字段;调用时须通过树实例而非 layui.tree 直接调用。
layui
tree 的
方法为什么返回空数组?
因为树节点没开启复选框,或者没设置
。layui 的树组件默认不启用多选,
只对显式启用了复选功能的树有效。
初始化树时必须传入
,否则
永远返回空数组
如果用的是
方式渲染(非异步),还要确保每个节点有
字段,否则初始状态不会被识别
异步加载(
)时,后端返回的数据里需包含
字段,且值为布尔类型(不是字符串
)
如何正确调用
获取已勾选节点?
必须先拿到树实例,再调用方法 —— 不能直接在
上调用,也不能在未渲染完成时就取值。
初始化树后,用
返回的实例保存起来,比如
获取勾选节点时,调用
,它返回的是一个数组,每个元素是带
、
等字段的节点对象
如果树是懒加载(
),且父节点被勾选但子节点未展开过,
默认**不会递归包含子节点**,除非设置了
并手动处理
返回的节点结构和常见误用
返回的是原始数据中对应节点的副本,但会额外带上
和
(如果存在),不包含 DOM 元素引用或 layui 内部标记字段。
别把返回结果直接当 DOM 节点操作,它只是 JS 对象;想高亮或禁用某节点,得用
或操作真实 DOM
如果节点数据里有重复
,
可能只返回第一个匹配项,layui 不校验 id 唯一性
勾选「父节点」时,默认开启级联(
),此时
返回的数组里**只有父节点本身**,不会包含其子节点,哪怕子节点实际也被视觉勾选了 —— 这是很多人以为“漏数据”的根本原因
级联勾选下怎么拿到所有实际被选中的叶子节点?
layui 的
不展开级联关系,要拿到全部生效节点,得自己递归遍历 + 判断状态。
基于Layui自定义内容轮播插件
基于Layui自定义内容轮播插件是一款表格数据为ajax加载的本地json数据,本地查看会有跨域问题导致数据不能显示。
下载
先用
拿到当前显式勾选的节点 ID 列表
再用
获取整棵树的扁平化或嵌套结构,遍历判断每个节点是否满足:自身被勾选,或父级被勾选且
更稳妥的做法是监听
事件,在每次勾选变化后,用自定义逻辑重新计算“最终生效节点集”,避免反复调用
造成误解
级联逻辑是渲染时决定的,不是运行时动态计算的 —— 这一点最容易被忽略。
getCheckedcheck: truegetcheckedcheck: truegetCheckeddatachecked: true/falseurlchecked"true"getCheckedlayui.treelayui.tree.render()let treeIns = layui.tree.render({...})treeIns.getChecked()idtitleisLazy: truegetCheckedcascade: falselet treeIns = layui.tree.render({
elem: '#test1',
data: [...],
check: true,
click: function(obj) {
console.log(treeIns.getChecked()); // ✅ 正确:在事件回调里用实例调用
}
});getCheckedidchildrentreeIns.update()idgetCheckedcascade: truegetCheckedgetCheckedtreeIns.getChecked()treeIns.getData()cascade: truechangegetChecked