Question

我正在使用Bootstrap Table插件Editable。我有一个按钮来向表中添加新行。我希望Notes列中新行的单元格的背景颜色为蓝色。

function cellStyle(value, row, index, field) {
  return {
    classes: 'text-nowrap another-class',
    css: {"color": "blue", "font-size": "50px"}
  };
}

唯一与这些参数一致并添加新行的是index = 0，因此我将所有其他参数默认为Null。似乎我的功能甚至没有被调用。我是JavaSript的新手，所以我可能只是遗漏了一些东西。

http://jsfiddle.net/8gk0ogtp/1/

 $button = $('#button');
    $(function () {
        $button.click(function () {
            $table.bootstrapTable('insertRow', {
                index: 0,
                row: {}
            });
            cellStyle();
        });
    });

function cellStyle1(value=Null, row=Null, index=0, field=Null) {  
   return {css: {"background-color": "blue"}}
}

Answer 1

试试这个

http://jsfiddle.net/bitriddler/qjht8stb/

<强>的变化：

添加新行时，我添加了paintBlue=true

将cellStyle更新为此

function cellStyle(value=Null, row=Null, index=0, field=Null) {
    if(row.paintBlue) {
        return {css: {"background-color": "blue"}}
    }
    return {};
}

在定义列时传递cellStyle函数，而不是传入html data-cell-style属性

...
{
    field: 'Notes',
    sortable: 'true',
    cellStyle: cellStyle,
    title: 'Notes',
    editable: {
    type: 'textarea'
}
...

在Bootstrap表中设置新行的背景颜色

1 个答案: