单元格颜色 - wenzhixin's bootstrap-tables (or alternative)

Question

我用wenzhixin的bootstrap tables有一段时间了，效果很好，现在我需要根据不同的阈值给每个单元格着色，我在想返回单元格值和通过 ajax 设置单元格颜色，这样我就可以在通话中完成所有过程。我正在这样加载 table：

if (data) {
    $('#estado').bootstrapTable('removeAll');
    $('#estado').bootstrapTable('load', data);
}

你建议如何解决这个问题，也许我不应该为此使用 wenzhixin bt？

我看到了另一个答案，但要使用它们，我应该添加一个额外的列，其中包含下一个应该具有的值，然后通过 js 为它着色，这是最好的方法吗？谢谢！

Answer 1

Bootstrap Table应该可以满足你的要求。基于单元格的样式的三个选项：

使用 'rowStyle' table 选项的行样式，它为 table 行启用 CSS 样式。这使用像这样的函数来让您从行数据中导出行样式：
```
function rowStyle(row, index) {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}
```
使用 'cellStyle' 列选项的单元格样式，它为 table 单元格启用 CSS 样式。这使用像这样的函数来让您从行数据中导出单元格样式：
```
function cellStyle(value, row, index, field) {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}
```
查看完整示例 here。

单个字段格式使用 'formatter' 列选项，它提供单元格内容的自定义 HTML 格式。这使用像这样的函数来导出 table 单元格的 HTML 内容：

function priceFormatter(value) {
   // 16777215 == ffffff in decimal
   var color = '#'+Math.floor(Math.random() * 6777215).toString(16);
   return '<div  style="color: ' + color + '">' +
          '<i class="glyphicon glyphicon-usd"></i>' +
          value.substring(1) +
          '</div>';
}

查看完整示例 here。

单元格颜色 - wenzhixin's bootstrap-tables (or alternative)

cell color - wenzhixin's bootstrap-tables (or alternative)

twitter-bootstrap

bootstrap-table

bootstrap-4