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

Question

我正在使用bootstrap表。如果我在style属性中设置了颜色，它就会被bootstrap-table删除，所以我所做的就是添加一个类似于"data-rowcolor“的属性，然后使用javascript来应用颜色：

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

这种方法的问题是，当我使用搜索框过滤内容时，颜色会消失。有什么办法可以在不丢失颜色的情况下设置颜色吗？

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

Answer 1

如果你使用的是bootstrap table，为什么不用"bootstrap table“的方式呢？

在使用搜索框进行过滤等操作时，将保留以这种方式设置的行样式。

使用Table option rowStyle

行样式格式器函数接受两个参数: row:行记录数据。index:行索引。支持类或css。示例用法：

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

查看jsFiddle here。

Answer 2

不是100%确定您是如何处理搜索的，但最有可能的是回调正在重新加载您的引导数据库表，其中没有您在Javascript中添加的background-color: how属性。

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

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

在提交完成并重新加载网格后，应该重新设置表的样式

或

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

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

没有'!important‘的样式很可能会被bootstrap的css覆盖。但是使用!important应该优先考虑css而不是bootstrap，即使你重新加载了网格，样式也应该仍然存在。