如何实现Bootstrap表格行可选中且筛选后保留选中状态及dataset设置？

我来帮你搞定这个问题——核心要解决DOM行的dataset.selected属性和Bootstrap Table内部选中状态同步，同时确保筛选后选中状态不丢失，顺便排查row.value异常的问题。

1. 修复复选框点击时的dataset与row状态同步 #

别只操作复选框的DOM，要同时同步Bootstrap Table的row选中状态，不然很容易出现row.value和实际DOM状态不一致的情况：

// 监听行内复选框的点击事件
$('table').on('change', 'input[type="checkbox"]', function() {
  const $checkbox = $(this);
  const $row = $checkbox.closest('tr');
  const table = $row.closest('table').bootstrapTable('getTable');
  // 这里要确保你的表格配置了uniqueId（比如uniqueId: 'id'），这样能精准拿到对应row
  const row = table.bootstrapTable('getRowByUniqueId', $row.data('uniqueid'));

  if ($checkbox.is(':checked')) {
    // 设置dataset.selected为true（注意dataset的值都是字符串）
    $row[0].dataset.selected = 'true';
    // 同步Bootstrap Table的选中状态
    table.bootstrapTable('check', row.id);
  } else {
    $row[0].dataset.selected = 'false';
    table.bootstrapTable('uncheck', row.id);
  }
});

⚠️ 重点：一定要给表格配置uniqueId属性（比如初始化时加uniqueId: '你的主键字段名'），不然通过索引或者其他方式拿row很容易出错，这大概率是你row.value异常的原因！

2. 筛选后恢复选中状态与dataset属性 #

Bootstrap Table筛选后会重新渲染行，所以得把选中的行的唯一标识存起来，渲染完再恢复状态：

// 用全局变量存选中的行id，也可以存在localStorage里持久化到页面刷新
let selectedRowIds = [];

// 监听表格的选中/取消选中事件，更新选中id列表
$('table').on('check.bs.table uncheck.bs.table check-all.bs.table uncheck-all.bs.table', function(e, rows) {
  const ids = Array.isArray(rows) ? rows.map(row => row.id) : [rows.id];
  if (e.type.includes('check')) {
    selectedRowIds = [...new Set([...selectedRowIds, ...ids])]; // 去重
  } else {
    selectedRowIds = selectedRowIds.filter(id => !ids.includes(id));
  }
});

// 表格渲染完成（包括筛选后）触发这个事件，恢复状态
$('table').on('post-body.bs.table', function() {
  const table = $(this).bootstrapTable('getTable');
  selectedRowIds.forEach(id => {
    const $row = $(table).find(`tr[data-uniqueid="${id}"]`);
    if ($row.length) {
      // 恢复dataset.selected
      $row[0].dataset.selected = 'true';
      // 恢复复选框选中状态
      $row.find('input[type="checkbox"]').prop('checked', true);
      // 同步表格内部的选中状态
      table.bootstrapTable('check', id);
    }
  });
});

3. 排查row.value异常的常见坑 #

如果还是遇到row.value不对的情况，检查这几点：

• 表格columns配置里的字段名是不是和数据源的字段完全一致？别拼写错了；
• 永远用getRowByUniqueId获取行，别用索引——筛选后行的索引会变，拿错row就会导致value异常；
• 不要直接修改row.value，要通过bootstrapTable('updateRow', {id: xxx, row: newData})来更新，保证内部数据和DOM同步。

小提示：如果你的表格是用data-toggle="table"初始化的，所有API调用都要放在post-init.bs.table事件里，确保表格初始化完成后再执行。

内容的提问来源于stack exchange，提问作者jdickel