bootstrap-table - 如何设置table行背景颜色

bootstrap-table - how to set table row background color

我正在使用 bootstrap table。如果我在样式属性中设置颜色,它会被 bootstrap-table 删除,所以我所做的是添加一个像 "data-rowcolor" 这样的属性,然后使用 javascript 应用颜色:

$('td[data-rowcolor]').attr("style", "background-color:yellow;");

这种方法的问题是,当我使用搜索框过滤内容时,颜色会消失。 任何想法如何能够设置颜色而不丢失它?

也许我应该在 onSearch 回调中设置颜色,但我不确定它是如何工作的。我看过 doc.

不能 100% 确定您是如何处理搜索的,但很可能回调正在重新加载您的 bootstrap table 其原始 bootstrap 样式而没有 background-color:你在Javascript.

中添加的黄色属性

您可以在提交时通过 javascript 再次设置样式属性,

$('#yourform').on('submit', function () {
    $('td[data-rowcolor]').attr("style", "background-color:yellow;");
})

在提交通过并重新加载网格后,应该再次设置您的 table 样式

尝试将 !important 添加到您的 css 样式中:

.td {
    background-color: yellow !important;
}

您没有“!important”的样式很可能被 bootstrap 的 css 覆盖。但是使用 !important 应该使 css 优先于 bootstrap。即使在您重新加载网格后样式也应该仍然存在。

如果您使用 bootstrap table,为什么不用 "bootstrap table" 的方式呢?

这样设置的行样式在使用搜索框进行过滤等时会保持不变

使用 Table option rowStyle:

行样式格式化函数,有两个参数: row:行记录数据。 索引:行索引。 支持类或css。用法示例:

function rowStyle(row, index) {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}

查看 jsFiddle here