bootstrapTable updateRow内容格式问题

最新推荐文章于 2025-09-11 02:21:49 发布

原创最新推荐文章于 2025-09-11 02:21:49 发布 · 6.7k 阅读

3 ·

CC 4.0 BY-SA版权

文章标签：

#bootstrapTable #updateRow #updateCell #格式化

本文介绍如何在使用BootstrapTable时，通过updateCell方法动态更新单元格内容并添加样式，如字体颜色。需定义显示效果字段及格式化函数，避免字段值被更新，确保效果正确渲染。

通过bootstrap table的updateRow或者updateCell无刷新更新单元格内容时，如果想加一些效果，比如改变字体颜色之类的，不能直接对字段进行格式化，否则字段值只是被更新为格式化后的字符串，也就是说字段值被更改且效果未被渲染。

举个例子，比如按秒更新运行时间duration，并且以红色字体显示：

function changeDuration(i,row){
    row.duration++;
    table.bootstrapTable('updateCell', { 
        index: i,
        field:"duration",
        value:"<span style='color: red;'>"+row.duration+"</span>"
    });
}

这么做会发现duration单元格的内容只是简单的显示为：<span style='color: red;'>10</span>

解决方法：

在初始化表格的field时，需定义对应的格式化函数，同时为了避免原本的字段值被更新，需要单独设置一个用于显示效果的字段，比如：duration_text，具体为：

1、单独定义用于显示效果的字段duration_text，并指定格式化函数

{field: 'duration_text', title: __('Duration_text'),operate:false,formatter: Controller.api.formatter.duration},

2、格式化函数：
duration: function (value, row, index) {
    return "<span style='color: red;'>" + row.duration + "</span>"
}

3、将updateCell的字段改为duration_text

function changeDuration(i,row){
row.duration++;
table.bootstrapTable('updateCell', {
index: i,
field:"duration_text",
value:"<span style='color: red;'>"+row.duration+"</span>"
});
}