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

Posted 2023-05-08

【中文标题】bootstrap-table - 如何设置表格行背景颜色

【英文标题】：bootstrap-table - how to set table row background color

【发布时间】：2018-08-01 15:00:56

【问题描述】：

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

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

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

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

【问题讨论】：

为什么不分享小提琴？

【参考方案1】：

如果您使用的是引导表，为什么不使用“引导表”的方式呢？

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

使用Table optionrowStyle：

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

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

查看 jsFiddle here。

【参考方案2】：

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

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

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

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

或

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

.td 
    background-color: yellow !important;

您没有'!important' 的样式很可能会被引导程序的css 覆盖。但是使用 !important 应该优先于引导程序的 CSS。即使在您重新加载网格后，样式也应该仍然存在。

【讨论】：

我正在使用引导搜索功能，因此它不会提交表单。它只是一个引导 javascript 代码，可在您键入时删除不匹配的行。也许我应该在 onSearch 回调中设置颜色。