站长图库向大家介绍了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; }, }, { field : 'ltaaaa', title : '联通的aaaa' , width : 140, cellStyle:function(value,row,index){ // 修改列（单元格）的颜色 return {css:{"background-color":"rgba(248,248,255,0.7)"}}; } }, { field : 'ltbbbb', title : '联通的bbbb' , width : 140, formatter : function(value, row, index) { value=$.trim(value); if(value.length>25){ return value.substr(0,24)+"..."; } return value; } }, { field : 'dxaaaa' , title : '电信的aaaaa' , width : 140 , cellStyle:function(value,row,index){ // 修改列（单元格）的颜色 return {css:{"background-color":"rgba(240,255,240,0.7)"}}; } }, { field : 'dxbbbbb' , title : '电信的bbbbb' , width : 140 , }, { field : 'isDel', title : '是否删除' , width : 80, formatter : function(value, row, index) { value=$.trim(value); if(value=="0"){ return "正常"; }else if(value=="1"){ return "已删除"; } return ""; } }, { field : 'createTime', title : '创建日期' , width : 140, formatter : function(value, row, index) { value = $.trim(value) ; if(value.length >= 19){ return value.substr(0 , 19); } return value; } }, { title : '操作', field : 'id', align : 'center', width : 200, formatter : function(value, row, index) { return '' ; } } ] });}说明：
{css:{"background-color":"rgba(255,250,250,0.7)"}}; // 中 0.7 是指透明度，当 两种（行和列）颜色交汇时，在交汇的单元格中，可以看到两种颜色。如下图所示：
