跳转到主内容
趣航编程网 - 趣学编程,启航技术之路!

layui tree获取选中节点 layui如何获取树组件的checked节点

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

相关文章