jquery grid设置行背景色

jquery grid设置行背景色项目中有一个需求,可以根据grid中某一列的

大家好,又见面了,我是你们的朋友全栈君。

项目中有一个需求,可以根据grid中某一列的值来设置该行的背景色,效果如下图所示。

jquery grid设置行背景色

具体代码如下:

var pmDetailGrid;
	window.onload = function(){
		pmDetailGrid = 	new biz.grid({
			id:"#pmDetailTable"	/*grid标签id*/,  
			//pager:"#pmDetailPage"	/*分页栏id*/, 
			url:"<c:url value='/pmPlan/listPmDetail'/>"	/*获取数据url*/, 
			navtype:"none"	/*导航栏类型,包括none、top、bottom、both*/, 
			caption:"部门计划明细表明细信息"	/*grid标题*/, 
			multiselect:false	/*是否可多选*/,   
			height:250,
			rowNum : "<biz:out value='${page.pageSize}' default='100'/>",
			colModel:[	/*列属性*/
          	 	{hidden:true, name:"pdId", key:true }  ,
          	 	{name:"pdOrder", label:"排序号",width:30 },
          	 	{name:"pdWorkContent",label:"工作计划" } ,
          	 	{name:"pdTimeLimit",label:"完成标准及要求" } ,
          	 	{name:"pdAccomplishStandard", label:"关联目标指标" } ,
          	 	{name:"pdUserName", label:"责任人"}
          		<c:if test="${pmPlan.ppState =='完成情况已提交'|| pmPlan.ppState =='完成情况退回修改' || pmPlan.ppState =='完成' }">//5,6,7
         	 	 ,
         	 	{name:"pdAccomplishThing", label:"工作小结" } 	
				</c:if>
				,{name:"pdAccomplishState",width:90,label:"完成状态",editable:true,edittype:'select',editoptions:{data: selectArr}}
           	],
        	loadComplete:function(data){
        		var obj = pmDetailGrid.getRowData();
            	jQuery(obj).each(function(index){
            		var accState = obj[index].pdAccomplishState;
            		var rowId = obj[index].pdId;
            		var bkcolor = "#FFFFFF";
            		if(accState == "1"){
            			bkcolor = "#00CD66";
                	}else if(accState == "2"){
                		bkcolor = "#FF0066";
                    }
            		pmDetailGrid.setRowData(rowId,obj[index],{background:bkcolor});
            	});
            },
			serializeGridData:function(postData){//添加查询条件值
				var obj = {};
				obj["pdPpId"] = document.getElementById("ppId").value;
				$.extend(true,obj,postData);//合并查询条件值与grid的默认传递参数
				return obj;
			}			
		});
	}

在loadComplete()事件中增加代码。

loadComplete:function(data){
        		var obj = pmDetailGrid.getRowData();
            	jQuery(obj).each(function(index){
            		var accState = obj[index].pdAccomplishState;
            		var rowId = obj[index].pdId;
            		var bkcolor = "#FFFFFF";
            		if(accState == "1"){
            			bkcolor = "#00CD66";
                	}else if(accState == "2"){
                		bkcolor = "#FF0066";
                    }
            		pmDetailGrid.setRowData(rowId,obj[index],{background:bkcolor});
            	});
            }

 

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请发送邮件至 举报,一经查实,本站将立刻删除。

发布者:全栈程序员-用户IM,转载请注明出处:https://javaforall.cn/159813.html原文链接:https://javaforall.cn

【正版授权,激活自己账号】: Jetbrains全家桶Ide使用,1年售后保障,每天仅需1毛

【官方授权 正版激活】: 官方授权 正版激活 支持Jetbrains家族下所有IDE 使用个人JB账号...

(0)
blank

相关推荐

发表回复

您的电子邮箱地址不会被公开。

关注全栈程序员社区公众号