Layui表格跨页勾选如何保留状态-Layui教程-PHP中文网

layui table翻页丢失复选框状态是因为每次重绘dom且不维护跨页选中记忆，需用两个数组手动管理：temp_all_list存所有已选项id，temp_table_list存当前页数据，并在done回调中匹配回填lay_checked字段及样式。

为什么默认切换页码后复选框状态会丢失

layui 的 table.render 每次翻页都会重新请求数据、重绘 dom，res.data 是全新数组，之前勾选的 lay-checked 样式和 checked 属性不会自动带过去——它不维护“选中状态”的跨页映射，只管当前页渲染。

你看到的“勾选消失”，本质是：DOM 被重建了，但没人告诉新 DOM “这些行之前被点过”。Layui 本身没做这层记忆，得自己补。

table.checkStatus('id') 只能拿到当前页已勾选的数据，翻页后就清空了
res.data 里没有 LAY_CHECKED 字段，除非你手动塞进去
直接操作 $('input[type="checkbox"]').prop('checked', true) 不够——还得同步加 layui-form-checked 类，否则样式不生效

用两个全局变量管理选中状态最稳

不需要改源码、不依赖插件，靠两个数组就能闭环：一个存所有已选中项（按唯一 ID），一个存当前页原始数据。关键在 done 回调里做匹配回填。

示例核心逻辑：

var temp_all_list = []; // 存所有已选中的完整对象（建议用 id 做 key 更安全）
var temp_table_list = []; // 存当前页全部数据，供 done 中遍历比对
<p>table.render({
elem: '#user_table',
id: 'user_table',
url: 'personnel/select',
page: true,
cols: [[{type: 'checkbox'}, /<em> 其他列 </em>/]],
done: function(res, curr, count) {
temp_table_list = res.data;
// 遍历当前页每条数据，看是否在 temp_all_list 中存在
temp_table_list.forEach(function(row) {
var found = temp_all_list.some(item => item.id === row.id);
if (found) {
row.LAY_CHECKED = 'true'; // 关键：必须设这个字段
var index = row.LAY_TABLE_INDEX;
$('.layui-table tr[data-index="' + index + '"] input[type="checkbox"]')
.prop('checked', true)
.next().addClass('layui-form-checked');
}
});
// 同步全选框状态（可选）
var checkStatus = table.checkStatus('user_table');
var $thCheckbox = $('.layui-table th[data-field="0"] input[type="checkbox"]');
$thCheckbox.prop('checked', checkStatus.isAll).next().toggleClass('layui-form-checked', checkStatus.isAll);
}
});</p>

选中事件监听必须绑定在 form.on('checkbox(*)', ...)，不能只靠 click —— layui 的 checkbox 是封装过的表单元素
存 temp_all_list 时，别 push 原始 row 对象（含 LAY_TABLE_INDEX 等临时字段），建议只存 {id, ...} 干净结构
如果后端返回的主键不是 id，比如是 eno，那所有 item.id === row.id 都得换成 item.eno === row.eno

监听 checkbox 事件时容易漏掉全选/反选逻辑

只监听单个 checkbox 点击，不处理表头全选框，会导致“点了全选 → 切页 → 再回来只剩部分勾选”——因为全选动作没记录到 temp_all_list 中。

正确做法是统一收口到一个函数：

form.on('checkbox(user_table)', function(obj){
  var data = obj.elem.checked ? obj.data : null;
  if (obj.type === 'all') {
    // 全选 or 取消全选
    if (obj.checked) {
      // 把当前页所有数据 id 加入 temp_all_list（去重）
      temp_table_list.forEach(function(row) {
        if (!temp_all_list.some(it => it.id === row.id)) {
          temp_all_list.push({id: row.id});
        }
      });
    } else {
      // 清除当前页所有 id
      temp_table_list.forEach(function(row) {
        var idx = temp_all_list.findIndex(it => it.id === row.id);
        if (idx > -1) temp_all_list.splice(idx, 1);
      });
    }
  } else {
    // 单选
    if (obj.checked) {
      if (!temp_all_list.some(it => it.id === data.id)) {
        temp_all_list.push({id: data.id});
      }
    } else {
      var idx = temp_all_list.findIndex(it => it.id === data.id);
      if (idx > -1) temp_all_list.splice(idx, 1);
    }
  }
});

务必判断 obj.type === 'all'，这是 layui 区分表头全选事件的关键字段
不要用 temp_all_list = [...new Set(...)] 去重——Set 无法识别对象相等，得手动 findIndex
如果表格支持搜索或筛选，temp_table_list 必须随搜索结果更新，否则比对会失效

radio 跨页保持选中要额外同步 cache

如果你表格里混用了 type: 'radio'，光改 res.data 和 DOM 不够。Layui 内部用 table.cache['id'] 缓存原始数据，翻页时读的是 cache，不是你改过的 res.data。

所以 radio 场景下，除了更新 DOM 和 temp_all_list，还必须手动同步 cache：

form.on('radio(user_table)', function(obj){
  var id = obj.value; // 假设 value 是唯一标识
  // 更新你的选中缓存
  temp_radio_selected = id;
  // 同步到 table.cache，确保翻页后仍可用
  var cache = table.cache['user_table'];
  if (cache && cache.length) {
    cache.forEach(function(row) {
      row.LAY_RADIO_CHECKED = (row.id == id);
    });
  }
});