我正在使用'Bootstrap Table'库从通过axios接收的json数据创建表。我的数据看起来像这样(来自PHP):
$columns = array();
$columns[] = [
'field' => 'loc',
'title' => 'Loc',
'class' => ($highlightedColumn == 'loc' ? 'highlightedColumn' : ''),
];
$columns[] = [
'field' => 'district',
'title' => 'District',
'class' => ($highlightedColumn == 'district' ? 'highlightedColumn' : ''),
];
$data = array();
$data[$i]['loc'] = "Location 1";
$data[$i]['district'] = "District 1";
...
return ('columns' => $columns, 'data' => $data);
现在,我已经设置了列样式,正如您从每列中的“class”属性所看到的那样,但是我希望设置单个单元格的样式(如$data[0]['loc'])是从数据库中获取的特定颜色,我正在从中提取信息,如-位置1的颜色为#f3003a,背景为#008800,而位置2将是#000000和#ffffff -所有颜色数据都在数据库中,并在将值分配给$data[$i]数组时循环。
这是可能的吗?我已经看了又看文档,还在谷歌上搜索了一下,但是我找不到一种方法来用这种方式给单个单元格设置样式。你可以通过一个分配给列的函数来给单元格设置样式,但是那个函数不能接收单个单元格请求的css数据。
为了更好地衡量,下面是我用来生成表的html/js:
<table id="table"></table>
<script>
function getAll() {
clearTable();
axios.get('/api/remote/').then(
function (response) {
$('#table').bootstrapTable({
stickyHeader: true,
fixedColumns: true,
fixedNumber: 1,
columns: response.data.columns,
data: response.data.data
});
});
}
function clearTable() {
$('#table').bootstrapTable('destroy');
}
window.onload = function () {
getAll();
}
</script>
1条答案
按热度按时间nsc4cvqm1#
我发现了一种很好的解决方法,以防别人碰到这个问题,需要一个可能的解决方案:
在一个可以作为API调用的PHP文件中,我放入了以下代码:
在需要样式的列中,我放入:
在表的html文件中,我放入:
然后,在获取表数据之前,调用getLocColors():
这是一种黑客,也许比本地解决方案慢一点,但它的工作。
你可以调整它,让API返回两个独立的数组--一个字符串列表,用来匹配要使用的数组索引,当然还有颜色值数组。然后只需更改locStyle,使用string include来搜索值,循环字符串来匹配数组。这样,即使单元格的值比你要匹配的多,它也能工作。