Layui tree树形组件如何获取选中的节点ID

轻芳大大_9554

轻芳大大_9554

2026-03-26

931人浏览

原创

必须手动遍历树数据结构,调用treeObj.getData()获取最新数据后递归筛选checked为true的节点ID;tree.getChecked()非官方API,不存在于Layui原生tree组件中。

layui tree 组件怎么拿到被勾选的节点 ID

直接调用 tree.setchecked 或监听 check 事件本身不会自动返回 id 列表;必须手动遍历树数据结构,靠 checked 字段筛选。layui 的 tree 并不维护“已选中 id 集合”的缓存,每次都要查。

监听 check 事件后如何提取所有已勾选节点的 ID

事件回调里的 data 参数只告诉你“当前这个节点”是否被勾选,不是全量状态。得结合 tree.getData() 拿到整棵树原始数据,再递归过滤出 checked: true 的节点。

  • 务必在初始化 tree 后,用 tree.render() 返回的实例调用 getData(),不能直接读取初始化时传入的数据对象(它不会自动同步勾选状态)
  • getData() 返回的是深层克隆后的数组,修改它不影响视图;但你要拿它的 id 和 checked 字段做判断
  • 如果启用了 showCheckbox: true 且设置了 cascade: false(非联动),那父子节点勾选是独立的,必须全树遍历,不能只看叶子节点
tree.on('check(test)', function(obj){
  const allData = treeObj.getData(); // treeObj 是 render() 返回的实例
  const getCheckedIds = (nodes) => {
    let ids = [];
    nodes.forEach(node => {
      if (node.checked) ids.push(node.id);
      if (node.children) ids = ids.concat(getCheckedIds(node.children));
    });
    return ids;
  };
  console.log(getCheckedIds(allData)); // 输出所有已勾选节点的 id 数组
});

为什么用 tree.getChecked() 会报错或返回空

因为 tree.getChecked() 根本不是 Layui 官方 API —— 这是很多人搜错关键词踩的坑。Layui 2.8.x 及之前版本的 tree 模块没有这个方法,文档里也不存在。你看到的可能是别人封装的工具函数,或是把 form.val() 或其他组件的方法记混了。

  • 别在控制台直接敲 tree.getChecked 试,八成是 undefined
  • 如果你用的是第三方魔改版 Layui(比如某些 CMS 内置版本),得翻它的扩展 JS 文件确认是否有额外挂载
  • 稳妥方式永远是:用 getData() + 手动遍历,兼容所有官方版本

多选联动(cascade)开启时 ID 提取逻辑要不要变

要变。开启 cascade: true(默认值)后,父节点勾选会自动同步子节点,但 getData() 返回的数据里,子节点的 checked 字段确实会被设为 true —— 所以你照常遍历就能拿到全部,不需要特殊处理。

  • 但注意:如果用户手动取消某个子节点勾选,而父节点仍为勾选态,此时父节点的 checked 会变成 null(半选),而那个子节点 checked 是 false;你只收集 true 就行,null 和 false 都忽略
  • 如果业务只要“完全勾选”的节点(排除半选父节点下的部分子节点),就得加一层判断:只收 checked === true,不用 == true
Layui tree 不维护选中状态快照,每次取 ID 都得走一遍数据遍历,而且 checked 的真假值语义和常见框架不同——null 表示半选,false 是明确未选,这点很容易在条件判断里漏掉。
PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

PHP怎么学习?PHP怎么入门?PHP在哪学?PHP怎么学才快?不用担心,这里为大家提供了PHP速学教程(入门到精通),有需要的小伙伴保存下载就能学习啦!

下载

相关标签:

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2023.08.07

2035

5

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.23

2982

1

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

2023.10.13

1016

3

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

2025.09.10

3379

7

ajax教程
ajax教程

php中文网为大家带来ajax教程合集,Ajax是一种用于创建快速动态网页的技术。通过在后台与服务器进行少量数据交换,Ajax可以使网页实现异步更新。这意味着可以在不重新加载整个网页的情况下,对网页的某部分进行更新。php中文网还为大家带来ajax的相关下载资源、相关课程以及相关文章等内容,供大家免费下载使用。

2023.06.14

2640

4

ajax中文乱码解决方法
ajax中文乱码解决方法

ajax中文乱码解决方法有设置请求头部的字符编码、在服务器端设置响应头部的字符编码和使用encodeURIComponent对中文进行编码。本专题为大家提供ajax中文乱码相关的文章、下载、课程内容,供大家免费下载体验。

2023.08.31

340

5

ajax传递中文乱码怎么办
ajax传递中文乱码怎么办

ajax传递中文乱码的解决办法:1、设置统一的编码方式;2、服务器端编码;3、客户端解码;4、设置HTTP响应头;5、使用JSON格式。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2023.11.15

2473

5

ajax网站有哪些
ajax网站有哪些

使用ajax的网站有谷歌、维基百科、脸书、纽约时报、亚马逊、stackoverflow、twitter、hacker news、shopify和basecamp等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

2024.09.24

1141

6

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
热门推荐
/
最新课程
phpStudy极速入门视频教程
phpStudy极速入门视频教程

共6课时 | 54.6万人学习

独孤九贱(4)_PHP视频教程
独孤九贱(4)_PHP视频教程

共89课时 | 133.4万人学习