如何在Bootstrap Table中为服务端返回数据的单个单元格设置样式？

第一步：修改PHP接口，携带单元格样式数据
你需要在返回的每条数据里，加上对应单元格的前景色、背景色信息，同时给需要自定义样式的列配置格式化函数标识。

修改后的PHP代码：

$columns = array();
$columns[] = [
    'field' => 'loc',
    'title' => 'Loc',
    'class' => ($highlightedColumn == 'loc' ? 'highlightedColumn' : ''),
    // 指定该列用自定义格式化函数处理
    'formatter' => 'locFormatter'
];
$columns[] = [
    'field' => 'district',
    'title' => 'District',
    'class' => ($highlightedColumn == 'district' ? 'highlightedColumn' : ''),
];

$data = array();
// 从数据库读取对应单元格的样式（示例值，实际从数据库获取）
$locTextColor = '#ffffff';
$locBgColor = '#2c3e50';
$data[$i]['loc'] = "Location 1";
// 把样式数据存到对应字段里
$data[$i]['loc_text_color'] = $locTextColor;
$data[$i]['loc_bg_color'] = $locBgColor;
$data[$i]['district'] = "District 1";
// 其他数据条目按同样逻辑添加样式字段

return json_encode(['columns' => $columns, 'data' => $data]);

第二步：在JS里写格式化函数，渲染带样式的单元格
Bootstrap Table的formatter函数能拿到当前行的所有数据，所以可以直接读取我们返回的样式字段，把单元格内容包装成带style的HTML元素。

修改后的HTML/JS代码：

<table id="table"></table>

<script>
// 给loc列写格式化函数
function locFormatter(cellValue, rowData, index) {
    // 读取该行对应的样式，没有的话用默认值
    const textColor = rowData.loc_text_color || '#333333';
    const bgColor = rowData.loc_bg_color || '#ffffff';
    // 返回带内联样式的内容（display:block确保样式铺满单元格）
    return `<span style="color: ${textColor}; background-color: ${bgColor}; display: block; padding: 6px;">${cellValue}</span>`;
}

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>

额外提示：

• 如果多个列需要自定义样式，重复上面的逻辑就行：给列加formatter配置，写对应格式化函数，在PHP里给每条数据加对应样式字段。
• 要是想让样式字段更规整，可以把样式打包成一个对象，比如row.loc_style = ['textColor' => '#fff', 'bgColor' => '#000']，JS里直接取row.loc_style.textColor就行。

内容的提问来源于stack exchange，提问作者Jon