动态修改 行 颜色的方法

rowStyle: function(row, index) { // 参数说明： //row, 行对象，row.xxx, 能获取某个字段的值 //index ，第几行 // 逻辑判断 // if (){ // }else{ // }... return {css:{"background-color":'rgba(245,245,245,0.7)'}}; }

动态修改 列（单元格）颜色的方法

cellStyle:function(value,row,index){ // 参数说明： // value ，当前单元格的值 // row，当前行的对象，row.xxx, 能获取某个字段的值 //index ，第几行 // 逻辑判断 // if (){ // }else{ // }..... 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 : 'name', title : '名称' , width : 140, }, { field : 'ydaaa', title : 'ydaaa' , width : 140, cellStyle : function(value,row,index){ // 修改列（单元格）的颜色 return {css:{"background-color":"rgba(255,250,250,0.7)"}}; } }, { field : 'ydbbb', title : 'ydbbb' , width : 140, formatter : function(value, row, index) { value=$.trim(value); if(value.length>25){ return value.substr(0,24)+"..."; } return value; }, }, { field : 'ltaaaa', title : 'ltaaaa' , width : 140, cellStyle:function(value,row,index){ // 修改列（单元格）的颜色 return {css:{"background-color":"rgba(248,248,255,0.7)"}}; } }, { field : 'ltbbbb', title : 'ltbbbb' , width : 140, formatter : function(value, row, index) { value=$.trim(value); if(value.length>25){ return value.substr(0,24)+"..."; } return value; } }, { field : 'dxaaaa' , title : 'dxaaaa' , width : 140 , cellStyle:function(value,row,index){ // 修改列（单元格）的颜色 return {css:{"background-color":"rgba(240,255,240,0.7)"}}; } }, { field : 'dxbbbbb' , title : 'dxbbbbb' , 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 : '创建日期' , }, { title : '操作', field : 'id', align : 'center', width : 200, formatter : function(value, row, index) { return '' ; } } ] }); }

说明：

{css:{"background-color":"rgba(255,250,250,0.7)"}}; 中 0.7 是指透明度，

当 两种（行和列）颜色交汇时，在交汇的单元格中，可以看到两种颜色。如下图所示：

---

1.本站遵循行业规范，任何转载的稿件都会明确标注作者和来源；2.本站的原创文章，会注明原创字样,如未注明都非原创，如有侵权请联系删除！；3.作者投稿可能会经我们编辑修改或补充；4.本站不提供任何储存功能只提供收集或者投稿人的网盘链接。