Bootstrap Table行背景色设置：筛选后颜色丢失的解决办法咨询

我之前也踩过Bootstrap Table这个样式丢失的坑！它的渲染机制会在搜索、分页、排序这类操作后重新生成tbody里的行元素，所以你手动通过JS加的样式很容易被覆盖掉。下面给你几个实用的解决方案，按推荐程度排序：

1. 用官方推荐的rowStyle配置项（最靠谱） #

这是Bootstrap Table原生支持的行样式配置，会在每次渲染行的时候自动执行——包括初始化、搜索、分页之后，完全不用担心样式丢失。

你可以直接在表格初始化时配置这个函数，根据行数据或者自定义的data-rowcolor属性返回样式：

$('#your-table-id').bootstrapTable({
  // 你的其他表格配置（列定义、数据源等）
  rowStyle: function(row, index) {
    // 两种方式获取颜色：要么从行数据里取，要么从DOM的data属性取
    // 方式1：如果你的数据源里本身带有颜色字段（比如row.rowColor）
    const bgColor = row.rowColor;
    
    // 方式2：如果是通过data-rowcolor属性设置在<tr>上的话，可以这样取
    // const bgColor = $(this).data('rowcolor');
    
    return {
      css: {
        'background-color': bgColor || 'transparent' // 兜底默认值
      }
    };
  }
});

这个方法完全贴合Bootstrap Table的渲染逻辑，是最优解。

2. 用onPostBody事件全局重置样式 #

如果不想修改表格初始化的配置，或者已经有现成的data-rowcolor属性，可以用onPostBody事件——这个事件会在表格体渲染完成后触发，不管是搜索、分页还是排序操作后都会执行。

代码示例：

$('#your-table-id').bootstrapTable({
  // 其他配置
  onPostBody: function() {
    // 遍历所有行，读取data-rowcolor并设置背景色
    $('#your-table-id tbody tr').each(function() {
      const rowColor = $(this).data('rowcolor');
      if (rowColor) {
        $(this).css('background-color', rowColor);
      }
    });
  }
});

3. 针对搜索操作的onSearch回调（不推荐，但满足你的需求） #

你提到考虑过onSearch回调，其实这个事件是在搜索开始时触发，而不是搜索完成渲染后，所以直接在这里设置样式可能会因为表格还没重新渲染而失效。如果一定要用的话，需要加个小延迟确保渲染完成：

// 先封装一个设置行颜色的函数
function setRowBackgrounds() {
  $('#your-table-id tbody tr').each(function() {
    const rowColor = $(this).data('rowcolor');
    if (rowColor) {
      $(this).css('background-color', rowColor);
    }
  });
}

$('#your-table-id').bootstrapTable({
  // 其他配置
  onSearch: function(searchText) {
    // 延迟100ms确保表格渲染完成后再设置样式
    setTimeout(setRowBackgrounds, 100);
  }
});

不过还是更推荐前两种方法，尤其是rowStyle，不需要依赖延迟，更稳定。

总结一下：优先用rowStyle配置，它是官方设计用来处理行样式的；其次用onPostBody事件，适合已有DOM属性的场景；onSearch回调是兜底方案，不如前两者可靠。

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