项目中有一个需求,可以根据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}); }); }