Layui数据表格重载reload时如何通过JS清空之前选中的行状态

阿枫大大_9733

阿枫大大_9733

2026-05-10

537人浏览

原创

table.reload() 后 checkbox 状态丢失是必然的,因会销毁重建 DOM;需调用 table.clearCache('yourTableId') 清除缓存中的选中状态,且 ID 必须与 table.render 中完全一致。

table.reload() 后 checkbox 状态丢失是必然的

因为 table.reload() 会销毁并重建整个表格 dom,所有 ui 层状态(包括 input[type=checkbox] 的 checked 属性)都会被丢弃。layui 不自动保存或恢复选中状态——它只按当前传入的 data 或 url 渲染,不关心你之前勾了哪几行。

清空已选状态必须分两步:清数据层 + 清 UI 层

不能只靠 table.reload({ where: {} }),那只是刷新数据,不会影响已缓存的勾选记录。真正要“清空”,得主动干预:

  • 调用 table.clearCache('yourTableId')(Layui 2.8+ 推荐),它会清除 table.cache 中该实例的全部缓存,包括选中状态快照
  • 若版本较老(table.cache['yourTableId'] = [] 手动清空缓存数组
  • 再执行 table.reload('yourTableId', { where: {}, page: { curr: 1 } }),确保新请求不带旧参数、页码归零

别漏掉 checkField 和 done 回调里的状态同步

如果你的表格启用了多选且依赖后端返回的选中字段(比如 isCheck: true),仅清缓存还不够:

dmap-jsapi-skill
dmap-jsapi-skill

DMap GL地图JSAPI(dmapgl)开发指南。用于编写、审查、调试 DMap 地图 API 代码,涵盖地图初始化、覆盖物渲染、图层管理、事件处理、控件交互等任务。当用户提及 dmap、dmapgl、jsapi‑gl 或相关地图开发需求时自动触发。

下载
  • 渲染时必须指定 checkField: 'isCheck',否则 Layui 不知道拿哪个字段判断初始勾选
  • 在 done 回调里,手动遍历 res.data,把所有 isCheck 设为 false,再调 table.reload() —— 否则新数据里没这个字段,checkbox 全是未勾选态,但用户感知不到“被清空”了
  • 如果用了 parseData,确保它不意外覆盖或删除 isCheck 字段,否则字段丢了,Layui 就认不出该勾谁

用 table.getChecked() 或 checkStatus 前先确认是否真清了

很多人以为 reload 完就干净了,结果 table.checkStatus('xxx').data 还返回旧数据——说明缓存没清干净:

  • table.getChecked('xxx') 是 2.8+ 新 API,只返回当前页已勾选项,但它依赖底层缓存;缓存不清,它就“看不见”变化
  • table.checkStatus('xxx') 返回对象包含 data(当前页)、isAll(是否全选)、count(总勾选数),但这些值都从 table.cache 读,不是实时 DOM
  • 验证是否清空:reload 后立刻打日志 console.log(table.checkStatus('xxx')),若 count !== 0 或 data.length > 0,说明 clearCache 没生效或表 ID 写错了

最易忽略的是:clearCache 的参数必须和 table.render({ id: 'xxx' }) 里的 id 完全一致,错一个字符,就等于对空气操作。

相关文章

PHP速学视频免费教程(入门到精通)
PHP速学视频免费教程(入门到精通)

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

下载

相关标签:

js layui

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

相关专题

更多
ajax教程
ajax教程

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

2023.06.14

2780

4

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

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

2023.08.31

360

5

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

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

2023.11.15

2613

5

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

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

2024.09.24

1161

6

Python uv使用教程
Python uv使用教程

本专题汇总了 Python uv 使用教程与高效使用指南,从 uv 安装配置、常用命令到虚拟环境、依赖管理与项目打包,系统讲解如何用 uv 替代 pip 与 poetry,全面提升 Python 项目开发效率,助你快速上手这一现代化包管理工具,打造干净高效的 Python 工作流。

2026.10.15

0

15

剧云AI短剧创作教程合集
剧云AI短剧创作教程合集

本专题聚焦剧云AI短剧创作,讲解从短剧灵感、梗概、全局大纲到分集、分场和正文的完整流程及节奏设计方法。

2026.10.14

0

15

剧云AI剧本创作零基础入门
剧云AI剧本创作零基础入门

本专题系统讲解剧云AI剧本创作流程,涵盖灵感、梗概、大纲、分场与正文生成,帮助新手快速完成首个中文剧本项目。

2026.10.14

0

14

VibeKnow文档转视频操作指南
VibeKnow文档转视频操作指南

本专题讲解VibeKnow上传Word、TXT、Markdown等材料生成视频的方法,覆盖内容解析、脚本组织、画面生成与成片检查。

2026.10.14

0

15

VibeKnow知识视频制作与导出详解
VibeKnow知识视频制作与导出详解

本专题整理VibeKnow从注册、素材上传、AI生成到预览导出的完整操作,帮助新手快速制作第一条知识讲解视频。

2026.10.14

0

13

热门下载

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

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
WEB前端教程【HTML5+CSS3+JS】
WEB前端教程【HTML5+CSS3+JS】

共101课时 | 21万人学习

JS进阶与BootStrap学习
JS进阶与BootStrap学习

共39课时 | 4.8万人学习