站长图库向大家介绍了bootstrapTable,动态设置行和列的颜色等相关知识,希望对您有所帮助
本篇文章给大家介绍一下bootstrapTable 动态设置行（rowStyle）的颜色 和 列（cellStyle 单元格）的颜色。有一定的参考价值，有需要的朋友可以参考一下，希望对大家有所帮助。
动态修改行颜色的方法
rowStyle: function(row, index) { // 参数说明： //row, 行，row.xxx,能获取某个字段的值 //index,索引，第几行 // 逻辑判断 // ..... return {css:{"background-color":'rgba(245,245,245,0.7)'}};}动态修改列（单元格）颜色的方法
cellStyle:function(value,row,index){ // 参数说明： // value ，当前单元格的值 // row，当前行的值 //index ，第几行 // 逻辑判断 // ..... return {css:{"background-color":"rgba(255,250,250,0.7)"}}; }说明：
rowStyle 是 Table options（表配置） ；
cellStyle 是Column options （列配置）。
在列中的选项配置。两者的位置最大的区别
使用示例如下：
function load() { $('#exampleTable').bootstrapTable({ url : "/config/list", queryParams : function(params) { return { limit: params.limit, offset: params.offset, } }, rowStyle: function(row, index) { // 动态修改行的颜色 var isDel = $.trim(row.isDel); if(isDel=="1"){ // 如果值是1，表示已删除，设置行的颜色 return {css:{"background-color":'rgba(245,245,245,0.7)'}}; } return ''; // 即使不改变颜色，也得返回 '' ，否则会报错。 }, columns : [ { checkbox : true, }, { field : 'platformName', title : '平台名称' , width : 140, }, { field : 'ydaaa', title : '移动的aaa' , width : 140, cellStyle : function(value,row,index){ // 修改列（单元格）的颜色 return {css:{"background-color":"rgba(255,250,250,0.7)"}}; } }, { field : 'ydbbb', title : '移动的bbb' , width : 140, formatter : function(value, row, index) { value=$.trim(value); if(value.length>25){ return value.substr(0,24)+"..."; } return value; }, }, {