jquery grid设置行背景色

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

jquery grid设置行背景色相关推荐

Extjs grid 设置行字体颜色
CustSuppGrid = Ext.create('Ext.grid.Panel', {title : '', // 标题头iconCls : 'icon-grid', // 标题图标store : ...
如何将DataGrid中任意行背景色设置为#00A000？
昨天遇到这样的一道题,我有点难住了,设置DataGrid任意行背景色,ok这点我没有问题,但是如何设置成#00A000,以前也遇到设置背景色问题,如果在Html中设置背景,只要BackColor=#0 ...
雷林鹏分享：jQuery EasyUI 数据网格 - 条件设置行背景颜色
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
html怎么设置数据条的颜色,jQuery EasyUI 数据网格 – 条件设置行背景颜色 | 菜鸟教程...
jQuery EasyUI 数据网格 - 条件设置行背景颜色本教程将向您展示如何根据一些条件改变数据网格(datagrid)组件的行样式.当 listprice 值大于 50 时,我们将为该行设置不 ...
Java 为 Excel 中的行设置交替背景色
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:牛人 20000 字的 Spring Cloud 总结,太硬核了~ 作者:Jazzz 链接:https://ww ...
drawitem设置指定行的背景颜色_Java 为 Excel 中的行设置交替背景色
点击上方好好学java ,选择星标公众号重磅资讯.干货,第一时间送达今日推荐:牛人 20000 字的 Spring Cloud 总结,太硬核了~ 作者:Jazzz链接:https://www ...
java 设置excel颜色_Java 为 Excel 中的行设置交替背景色
在制作 Excel表格时, 通过将数据表中上下相邻的两行用不同的背景色填充 ,可以使各行的数据看起来更清楚 ,避免看错行 ,同时也能增加 Excel 表格的美观度 . 本文将介绍如 ...
C#设置DataGridView行背景色无效的问题
C#设置DataGridView行背景色无效的问题设置代码 for (int i = 0; i < dataGridView1.RowCount; i++){if (i % 2 == 0){d ...
jQuery - 实现设置指定列给动态表格的行生成自动序号
jQuery - 实现设置指定列给动态表格的行生成自动序号无表头表格 HTML jQuery 示意图有表头表格 HTML jQuery 示意图无表头表格 HTML <table id=&q ...

jquery grid设置行背景色

jquery grid设置行背景色相关推荐

最新文章

热门文章