• 技术文章 >web前端 >Bootstrap教程

    浅谈bootstrapTable如何动态设置行和列的颜色

    青灯夜游青灯夜游2021-06-17 18:22:10转载406
    本篇文章给大家介绍一下bootstrapTable 动态设置行(rowStyle)的颜色 和 列(cellStyle 单元格)的颜色。有一定的参考价值,有需要的朋友可以参考一下,希望对大家有所帮助。

    【相关推荐:《bootstrap教程》】

    动态修改行颜色的方法

    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)"}};    
    }

    说明:

    在列中的选项配置。两者的位置最大的区别

    使用示例如下:

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

    当 两种(行和列)颜色交汇时,在交汇的单元格中,可以看到两种颜色。如下图所示:

    在这里插入图片描述

    更多编程相关知识,请访问:编程入门!!

    以上就是浅谈bootstrapTable如何动态设置行和列的颜色的详细内容,更多请关注php中文网其它相关文章!

    声明:本文转载于:csdn,如有侵犯,请联系admin@php.cn删除
    专题推荐:Bootstrap bootstrapTable
    上一篇:bootstrapValidator如何验证最大值和最小值限制 下一篇:浅谈BootStrap实现栅格布局的方法
    第16期线上培训班

    相关文章推荐

    • 3 分钟使用Bootstrap-Table实现满意的表格功能• 深入解析bootstrap-select中的多选和模糊查询下拉框• 浅谈Bootstrap中的自适应屏幕• bootstrapTable如何重新加载数据?3种方式了解一下!• 浅谈css grid比Bootstrap更适合创建布局的原因

    全部评论我要评论

  • 取消发布评论发送
  • 1/1

    PHP中文网