bootstrapTable 动态设置行（rowStyle）的颜色和列（cellStyle 单元格）的颜色

朴灿烈づ我的快乐病毒、 2023-01-13 14:54 776阅读 0赞

动态修改 **行** 颜色的方法

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` 是指透明度，

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

![在这里插入图片描述][20210419103133530.png]

[20210419103133530.png]: /images/20221022/257a9c75fea54d32b0e9e27ca4237a34.png

发表评论取消回复

表情：

评论列表（有 0 条评论，776人围观）

还没有评论，来说两句吧...

相关阅读

相关 java通过CellStyle设置单元格背景颜色

设置单元格背景色很简单一行代码搞定，直接上代码如下： //创建工作薄 Workbook wb = new XSSFWorkbook()

浅浅的花香味﹌/ 2024年04月06日 13:42/ 0 赞/ 58 阅读

相关 Java POI excel单元格背景色(填充)、字体颜色(对齐)、边框(颜色)、行高、列宽设置

文章目录 1、Excel Cell单元格背景色+颜色名称对照关系 2、Excel Cell单元格背景填充样式+颜色填充对照关系 3、Excel Cell

以你之姓@/ 2023年10月13日 12:39/ 0 赞/ 34 阅读

相关 bootstrapTable 动态设置行（rowStyle）的颜色和列（cellStyle 单元格）的颜色

动态修改行颜色的方法 rowStyle: function(row, index) { // 参数说明： //row, 行对象，row.x

朴灿烈づ我的快乐病毒、/ 2023年01月13日 14:54/ 0 赞/ 777 阅读

相关 poi设置单元格背景颜色

Java使用poi可以很方便地导出Excel表格文件，同时可以设置各种样式，例如背景颜色。下面给出两个例子设置背景颜色，一个使用自带的颜色设置背景颜色，一个使用自定义颜色设置。

r囧r小猫/ 2022年10月09日 12:14/ 0 赞/ 318 阅读

相关比较不同的单元格的值,设置不同的颜色

Sub SetDifferentColor() ' ' 比较不同的单元格的值,设置不同的颜色 ' Dim colors

灰太狼/ 2022年09月22日 01:15/ 0 赞/ 173 阅读

相关 POI 设置单元格样式（字体样式、背景颜色、边框样式、对齐方式、自动换行、列宽行高、冻结行和列、合并单元格）

/ 设置单元格样式 / public void setCellStyle(Workbook w

╰+攻爆jí腚メ/ 2022年09月03日 05:09/ 0 赞/ 569 阅读

相关 POI 设置单元格背景颜色

[POI 设置单元格背景颜色][POI] 转载自http://xiaohewoai.iteye.com/blog/1300817 博客分类： [apach

￡神魔★判官ぃ/ 2022年08月12日 13:29/ 0 赞/ 316 阅读

相关 BootstrapTable 特定列修改字体颜色

最近使用GitHub的一个开源项目，涉及到BootstrapTable的使用，今天遇到了给特定列修改颜色的问题，查找之后知道可以通过formatter初始化表格列来实现，代码如

柔情只为你懂/ 2022年06月10日 02:43/ 0 赞/ 265 阅读

相关 Winform中DataGridView显示行号，设置行和列的颜色

首先设置dataGridView的RowPostPaint事件，然后添加如下代码： private void dataGridView1_RowPo

悠悠/ 2022年05月20日 07:25/ 0 赞/ 299 阅读

相关单元格颜色渐变的GridView

代码如下: <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.or

我就是我/ 2021年11月11日 23:30/ 0 赞/ 805 阅读