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

mnemlml8  于 2023-01-28  发布在  Bootstrap
关注(0)|答案(1)|浏览(167)

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

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来搜索值,循环字符串来匹配数组。这样,即使单元格的值比你要匹配的多,它也能工作。

相关问题