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

时间:2018-02-21 21:39:23

标签: bootstrap-table

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

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

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

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

2 个答案:

答案 0 :(得分:4)

如果您使用的是bootstrap表,为什么不使用" bootstrap表"办法?

使用搜索框过滤等时,将保持以这种方式设置的行样式。

使用Table option rowStyle

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

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

查看jsFiddle here

答案 1 :(得分:0)

不是100%确定您是如何处理搜索的,但很可能回调是使用其原始引导样式重新加载引导程序表,而不使用在Javascript中添加的background-color:yellow属性。

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

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

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

OR

尝试添加!important对您的css风格:

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

你的造型没有'!important'最有可能被bootstrap的css覆盖。但是使用!important应该优先考虑你的css而不是bootstrap。即使在重新加载网格后,样式仍应存在。