Bootstrap Table 动态修改行的颜色

Bootstrap Table 官网地址 https://bootstrap-table.com/
百度搜了大量资料 还是找不 动态改变行的颜色,一般搜索到的都是 初始化的时候  使用 rowStyle 控制

  rowStyle: function (row, index) { // 提示 标红
                    if (row.repeat == 1) {

                        return { css: { 'background-color': 'yellow' } };
                    } else if (row.repeat == 2) {
                        return { css: { 'background-color': 'red' } };
                    }
                    return { css: { 'background-color': '' } };
                },//通过自定义函数设置行样式

这样这样我们不知道后期怎么动态的具体修改某行的颜色

但是

后来在文档中找到了 updateRow  方法  看我们怎么使用它

var allTableData = $table.bootstrapTable('getData');//获取表格的所有内容行
                    $(allTableData).each(function (i, k) {
                        $table.bootstrapTable('updateRow', {
                            index: i,
                            row: {
                                repeat: 1
                            }
                        });
                    });

结合上面的 rowStyle ,这样 我们就完成了 动态修改 行颜色的功能,修改数据内容,它会自动刷新 rowStyle 方法 。

注意不要使用 classes 修改样式 因为全选的时候 它会覆盖你修改的颜色

posted @ 2020-11-13 13:59  紫寻落  阅读(1859)  评论(0编辑  收藏  举报