Question

我已经使用了wenzhixin的bootstrap表一段时间，结果非常好，现在我需要根据不同的阈值为每个单元格着色，我想通过ajax返回单元格值和单元格颜色，所以我可以做所有的通话过程中。我正在加载这样的表：

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

你怎么建议解决这个问题，也许我不应该使用wenzhixin bt这个？

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

Answer 1

Bootstrap Table应该能够处理你想要的东西。基于单元格样式的三个选项：

使用'rowStyle'表选项进行行样式设置，该选项可为表行启用CSS样式。这使用类似这样的函数来从行数据派生行样式：
```
function rowStyle(row, index) {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}
```
使用'cellStyle'列选项进行单元样式设置，该选项可为表格单元格启用CSS样式。这使用类似这样的函数来从行数据中导出单元格样式：
```
function cellStyle(value, row, index, field) {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}
```
请参阅完整示例here。

使用'formatter'列选项进行单独的字段格式设置，该选项提供单元格内容的自定义HTML格式。这使用类似这样的函数来导出表格单元格的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。

细胞颜色 - 文智信的引导表（或替代品）

1 个答案: