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

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

阿枫大大_9733

阿枫大大_9733

发布时间:2026-05-10 08:43:54

|

537人浏览过

|

来源于php中文网

原创

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),仅清缓存还不够:

  • 渲染时必须指定 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 完全一致,错一个字符,就等于对空气操作。

热门AI工具

更多
二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

SkildArt
SkildArt Hot

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

切问学术

切问学术是一款AI论文写作工具,复旦大学NLP团队推出的AI学术智能体。

UpDream
UpDream Hot

一款AI视频创作工具,主要用于哔哩哔哩推出的自研AI视频创作工具,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

Lovart
Lovart Hot

一款面向视觉设计创作的AI设计平台,可通过智能体和画布工作流辅助制作海报、Logo、网页、PPT及其他视觉内容。

WorkBuddy

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

豆包大模型

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

DeepSeek

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

相关专题

更多
ajax教程
ajax教程

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

2780

2023.06.14

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

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

360

2023.08.31

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

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

2613

2023.11.15

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

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

1161

2024.09.24

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

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

0

2026.10.14

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

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

0

2026.10.14

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

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

0

2026.10.14

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

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

0

2026.10.14

二狗PPT大纲编辑实操指南
二狗PPT大纲编辑实操指南

本专题聚焦二狗PPT结构化大纲的生成和修改,讲解标题、正文、目录、页数与页面顺序的调整方法,提升汇报逻辑和内容完整性。

0

2026.10.14

热门下载

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

精品课程

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

共101课时 | 20.9万人学习

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

共39课时 | 4.8万人学习

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

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