跨页勾选需手动维护selectedIds数组,翻页后在done回调中用setRowChecked恢复状态,并通过localStorage持久化;全选仅作用于当前页,须确保数据行有唯一id字段。
跨页勾选必须自己存状态,Layui 表格原生不支持
layui 的 table.render() 渲染的表格,checkbox 列的勾选状态默认只在当前页生效。翻页后,上一页的勾选直接丢失——这不是 bug,是设计如此:每页数据重新渲染,dom 重建,input[type="checkbox"] 状态自然重置。
所以关键不是“怎么开启跨页勾选”,而是“你得自己记下哪些 ID 被选了”。最稳妥的方式是维护一个全局数组(如 selectedIds),所有勾选/取消动作都同步更新它,再配合 table.checkStatus() 和 table.setRowChecked() 控制视觉状态。
- 不要依赖
table.checkStatus(tableId)想一次拿到全部已选(它只返回当前页) - 每次点击 checkbox 时,用事件委托捕获
td div.layui-form-checkbox的 click,手动增删selectedIds - 翻页前无需特殊操作;翻页后,在
done回调里遍历新页数据,对id在selectedIds中的行调用table.setRowChecked({id: row.id})
done 回调里恢复勾选状态,但要注意 timing 和 row.id
table.render() 的 done 是唯一可靠时机:此时 DOM 已渲染完毕,行元素可被定位,setRowChecked 才能生效。早于它(比如在 parseData 里)会失败。
前提是你的数据源里每一行有唯一、稳定的 id 字段(不能是数组下标或临时生成的)。Layui 默认用 data.id 作为行标识,如果你的字段叫 userId 或 record_id,必须显式配置:id: 'userId'(这是 table.render() 的参数,不是列定义)。
-
done函数接收三个参数:res(原始响应)、curr(当前页码)、count(总条数),其中res.data是当前页数据数组 - 遍历时别直接用
row.id,先确认字段名,比如row.userId,再查selectedIds.includes(row.userId) - 批量恢复时别用循环 +
setRowChecked,性能差;改用table.cache[tableId]获取缓存数据,再设checked: true,最后table.reload()(不推荐)或直接操作 DOM(更轻量)
全选/反选按钮要同步更新 selectedIds,且区分页内与全局
表格顶部的「全选」checkbox 实际控制的是当前页所有行,但它常被误当成“全表全选”。必须明确:点击它,只应增删当前页的 ID 到 selectedIds,而不是清空再塞入全部数据 ID(数据量大时卡死,且分页请求没拿全数据)。
- 监听
thead input[name="layTableCheckbox"]的 change 事件,获取当前页所有row.id(从table.cache[tableId]或res.data) - 如果勾选,用
Array.prototype.push(...ids)并去重(new Set());如果取消,用filter剔除这批 ID - 禁用“全表反选”逻辑:用户没加载过的页,你根本不知道有哪些 ID,无法安全反选
- 显示已选数量时,用
selectedIds.length,不是table.checkStatus().data.length
刷新页面后状态丢失?localStorage 是最低成本方案
用户翻几页、勾选一堆,F5 刷新就全没了——这是最常被忽略的一环。Layui 不管持久化,你得自己存。
用 localStorage 存 selectedIds 数组最直接。注意两点:一是存前 JSON.stringify,取时 JSON.parse 并校验是否为数组;二是避免污染,加前缀如 myApp_table_selected_123(123 是 table 实例 ID 或业务标识)。
- 初始化时读取:
const saved = localStorage.getItem('myApp_table_selected_main');→selectedIds = JSON.parse(saved) || [] - 每次修改
selectedIds后立刻存:localStorage.setItem('myApp_table_selected_main', JSON.stringify(selectedIds)) - 敏感场景(如金融操作)别存,或存前加密;普通管理后台够用
- 不同 table 实例必须用不同 key,否则互相覆盖
跨页勾选真正难的不是代码量,是状态边界意识:哪部分状态属于当前页,哪部分属于整个业务流程,什么时候该存、什么时候该清——漏掉任一环,用户就会觉得“刚点的怎么又没了”。


















