Home > Web Front-end > Bootstrap Tutorial > A brief discussion on how to dynamically set row and column colors in bootstrapTable

A brief discussion on how to dynamically set row and column colors in bootstrapTable

青灯夜游
Release: 2021-06-17 18:22:10
forward
3978 people have browsed it

This article will introduce to you how bootstrapTable dynamically sets the color of the row (rowStyle) and the color of the column (cellStyle cell). It has certain reference value. Friends in need can refer to it. I hope it will be helpful to everyone.

A brief discussion on how to dynamically set row and column colors in bootstrapTable

[Related recommendation: "bootstrap tutorial"]

How to dynamically modify the row color

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

Method to dynamically modify column (cell) color

cellStyle:function(value,row,index){
	// 参数说明:
	// value ,当前单元格的值
	// row,当前行的值
	//index ,第几行
	
	// 逻辑判断
	// .....             
	return {css:{"background-color":"rgba(255,250,250,0.7)"}};    
}
Copy after login

Description:

  • rowStyle is Table options ( Table configuration);
  • cellStyle is Column options (column configuration).

Option configuration in columns. The biggest difference between the two positions

Usage examples are as follows:

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 '' ;
				}
			} ]
	});
}
Copy after login

Instructions:

{css: {"background-color":"rgba(255,250,250,0.7)"}}; where 0.7 refers to transparency,

when two (row and column) colors intersect , in the intersecting cells, two colors can be seen. As shown in the picture below:

A brief discussion on how to dynamically set row and column colors in bootstrapTable

For more programming-related knowledge, please visit: Introduction to Programming! !

The above is the detailed content of A brief discussion on how to dynamically set row and column colors in bootstrapTable. For more information, please follow other related articles on the PHP Chinese website!

Related labels:
source:csdn.net
Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn
Popular Tutorials
More>
Latest Downloads
More>
Web Effects
Website Source Code
Website Materials
Front End Template