讲师中心 微信公众号
AI工具推荐 视频效率加速

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

轻墨同学_6639

轻墨同学_6639

发布时间:2026-05-09 08:52:01

|

234人浏览过

|

来源于php中文网

原创

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 内部标记字段。

深蓝色网站后台管理系统layui框架模板-AdminPro
深蓝色网站后台管理系统layui框架模板-AdminPro

一款深蓝色网站后台管理系统layui框架模板

下载
  • 别把返回结果直接当 DOM 节点操作,它只是 JS 对象;想高亮或禁用某节点,得用 treeIns.update() 或操作真实 DOM
  • 如果节点数据里有重复 id,getChecked 可能只返回第一个匹配项,layui 不校验 id 唯一性
  • 勾选「父节点」时,默认开启级联(cascade: true),此时 getChecked 返回的数组里**只有父节点本身**,不会包含其子节点,哪怕子节点实际也被视觉勾选了 —— 这是很多人以为“漏数据”的根本原因

级联勾选下怎么拿到所有实际被选中的叶子节点?

layui 的 getChecked 不展开级联关系,要拿到全部生效节点,得自己递归遍历 + 判断状态。

  • 先用 treeIns.getChecked() 拿到当前显式勾选的节点 ID 列表
  • 再用 treeIns.getData() 获取整棵树的扁平化或嵌套结构,遍历判断每个节点是否满足:自身被勾选,或父级被勾选且 cascade: true
  • 更稳妥的做法是监听 change 事件,在每次勾选变化后,用自定义逻辑重新计算“最终生效节点集”,避免反复调用 getChecked 造成误解

级联逻辑是渲染时决定的,不是运行时动态计算的 —— 这一点最容易被忽略。

热门AI工具

更多
Loomy
Loomy Hot

一款AI工具,主要用于科大讯飞发布的桌面级 AI 助理,比 OpenClaw 更易用、更安全!,适合需要提升相关任务效率的用户。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

AionClaw
AionClaw Hot

AionClaw是一款面向办公、创作和编程任务的AI桌面智能体。

立刻MV
立刻MV Hot

立刻MV是一款AI文本写作工具,AI 音乐视频(MV)创作工具。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

讯飞智作

讯飞智作是一款AI视频创作工具,AI文本配音工具,数字人课程、营销视频制作。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

SkildArt
SkildArt Hot

SkildArt是一款AI文本写作工具,一站式 AI 视觉创作平台。

PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

相关专题

更多
python是前端还是后端
python是前端还是后端

Python属于前端也属于后端,其灵活性和丰富的生态系统使得开发人员能够在不同的领域中灵活运用。本专题为大家提供python相关的文章、下载、课程内容,供大家免费下载体验。

2403

2023.08.11

前端如何实现即时通讯
前端如何实现即时通讯

实现即时通讯的方法有WebSocket、Long Polling、Server-Sent Events、WebRTC等等。详细介绍:1、WebSocket,它可以在客户端和服务器之间建立持久连接,实现实时的双向通信,前端可以使用 WebSocket API来创建WebSocket连接,并通过发送和接收消息来实现即时通讯;2、Long Polling,是一种模拟实时通信的技术等等。

5183

2023.10.09

前端和后端的区别
前端和后端的区别

前端关注的是用户界面的设计和交互,而后端则注重数据处理和逻辑控制。想了解更多前端后端的相关内容,可以阅读本专题下面的文章。

6250

2024.03.19

php和前端的关联介绍
php和前端的关联介绍

php既可以作为前端语言,也可以作为后端语言。想了解更多php和前端的相关内容,可以阅读本专题下面的文章。

5818

2024.03.22

前端外包工作内容有哪些
前端外包工作内容有哪些

前端外包工作内容包括:1. 网站和应用程序开发;2. 用户界面和交互设计;3. 用户体验优化;4. 设计和视觉开发;5. 跨浏览器兼容性;6. 性能优化;7. 维护和更新;8. 项目管理和沟通。想了解更多前端的相关内容,可以阅读本专题下面的文章。

823

2024.05.22

C语言变量命名
C语言变量命名

c语言变量名规则是:1、变量名以英文字母开头;2、变量名中的字母是区分大小写的;3、变量名不能是关键字;4、变量名中不能包含空格、标点符号和类型说明符。php中文网还提供c语言变量的相关下载、相关课程等内容,供大家免费下载使用。

3049

2023.06.20

c语言入门自学零基础
c语言入门自学零基础

C语言是当代人学习及生活中的必备基础知识,应用十分广泛,本专题为大家c语言入门自学零基础的相关文章,以及相关课程,感兴趣的朋友千万不要错过了。

2268

2023.07.25

c语言运算符的优先级顺序
c语言运算符的优先级顺序

c语言运算符的优先级顺序是括号运算符 > 一元运算符 > 算术运算符 > 移位运算符 > 关系运算符 > 位运算符 > 逻辑运算符 > 赋值运算符 > 逗号运算符。本专题为大家提供c语言运算符相关的各种文章、以及下载和课程。

1220

2023.08.02

PixTV官网入口地址合集
PixTV官网入口地址合集

本专题汇总了 PixTV AI 一站式视频创作平台的官方入口与使用教程。无需下载软件,浏览器直接访问即可使用。平台将剧本、图像、视频、声音与剪辑整合在“无限画布”中,接入 GPT Image 2.5、Seedance 2.5 等头部模型。本专题整理了从新建画布、角色锚定、分镜拆分到视频生成与导出的完整操作指南,助你快速上手 AI 短剧与漫剧创作。

40

2026.10.10

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
ThinkPHP配置开发与CMS后台实战
ThinkPHP配置开发与CMS后台实战

共87课时 | 12.8万人学习

第二十三期_综合实战
第二十三期_综合实战

共89课时 | 11万人学习

Layui 快速入门精讲
Layui 快速入门精讲

共5课时 | 1.6万人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn