在 Bootstrap Table 中设置新行的背景颜色
Setting background color of new rows in Bootstrap Table
我正在使用 Bootstrap Table
和 Editable
插件。我有一个按钮可以将新行添加到 table。我希望 Notes
列中新行的单元格具有蓝色背景色。
function cellStyle(value, row, index, field) {
return {
classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
};
}
唯一与这些参数一致并添加新行的是索引= 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"}}
}
试试这个
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
函数而不是传入htmldata-cell-style
属性
...
{
field: 'Notes',
sortable: 'true',
cellStyle: cellStyle,
title: 'Notes',
editable: {
type: 'textarea'
}
...
我正在使用 Bootstrap Table
和 Editable
插件。我有一个按钮可以将新行添加到 table。我希望 Notes
列中新行的单元格具有蓝色背景色。
function cellStyle(value, row, index, field) {
return {
classes: 'text-nowrap another-class',
css: {"color": "blue", "font-size": "50px"}
};
}
唯一与这些参数一致并添加新行的是索引= 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"}}
}
试试这个
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
函数而不是传入htmldata-cell-style
属性
...
{
field: 'Notes',
sortable: 'true',
cellStyle: cellStyle,
title: 'Notes',
editable: {
type: 'textarea'
}
...