如何在 Bootstrap-Table 中设置单个单元格的样式，设置从服务器接收到的数据的样式？

Question

我正在使用“引导表”库从通过 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);

现在我已经有了 styles 列，正如您从每一列的“类”属性中看到的那样，但是我想将单个单元格（如 $data[0]['loc']）的样式设置为特定于从数据库中获取的 colors我正在从中提取信息，比如 - 位置 1 的颜色为#f3003a，背景为#008800，而位置 2 的颜色为#000000 和#ffffff - 所有颜色数据都在数据库中，并在将值分配给 $data[$i] 数组。

这可能吗？ 我查看并查看了文档并用谷歌搜索了一下，但我找不到以这种方式设置单个单元格样式的方法。 您可以通过分配给列的 function 设置单元格样式，但 function 无法接收单个单元格请求的 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>

Answer 1

我发现了一种这样做的 hacky 方法，以防其他人偶然发现这个问题并需要一个可能的解决方案：

在 PHP 文件中，我可以调用 API 调用，我将以下代码放入：

    public function getLocColors()
    {
        $locations = \App\Models\Location::select('abbreviation', 'bgcolor', 'color')->get();
        $colors = array();
        foreach ($locations as $location) {
            $colors[strtoupper($location->abbreviation)] = array('bgcolor' => $location->bgcolor, 'color' => $location->color);
        }

        return $colors;
    }

在需要我放置的样式的列中：

        $columns[] = [
            'field' => 'loc',
            'title' => 'Loc',
            'sortable' => true,
            'cellStyle' => 'locStyle',
            'width' => 75
        ];

在表的 html 文件中，我输入了：

// Put these functions somewhere

                            function locStyle(value, row, index) {
                                if (locColors !== undefined && locColors[value] !== undefined) {
                                    return {
                                        css: {
                                            "background-color": locColors[value]['bgcolor'],
                                            "color": locColors[value]['color']
                                        }
                                    }
                                } else {
                                    return {
                                        css: {
                                            
                                        }
                                    }
                                }
                            }

                            function setLocColors(colors) {
                                locColors = colors;
                            }

                            function getLocColors() {
                                axios.get('/api/getloccolors').then(
                                    function (response) {
                                        setLocColors(response.data);
                                    });
                            }

然后就在我获取表格数据之前，我调用了 getLocColors()：

                            window.onload = function () {
                                getLocColors();
                                getAll();
                            }

这有点像 hack，可能比本机解决方案慢一点，但它确实有效。

您可以调整它以从 API 返回两个单独的 arrays - 一个字符串列表以匹配要使用的数组索引，当然还有具有颜色值的数组。 然后只需更改 locStyle 以使用字符串包含来搜索值，循环遍历字符串以匹配数组。 这样即使单元格值超过您要匹配的值，它也能正常工作。