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

mnemlml8 于 2023-01-28 发布在 Bootstrap

关注(0)|答案(1)|浏览(172)

我正在使用'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>

twitter-bootstrap

来源：https://stackoverflow.com/questions/75188176/how-can-i-style-individual-cells-in-bootstrap-table-setting-the-style-in-the-da

1条答案

按热度按时间

nsc4cvqm1#

我发现了一种很好的解决方法，以防别人碰到这个问题，需要一个可能的解决方案：
在一个可以作为API调用的PHP文件中，我放入了以下代码：

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();
                            }

这是一种黑客，也许比本地解决方案慢一点，但它的工作。
你可以调整它，让API返回两个独立的数组--一个字符串列表，用来匹配要使用的数组索引，当然还有颜色值数组。然后只需更改locStyle，使用string include来搜索值，循环字符串来匹配数组。这样，即使单元格的值比你要匹配的多，它也能工作。

赞(0）回复(0）举报 2023-01-28

我来回答

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

1条答案

相关问题

热门标签

最新问答