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

 

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

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

(0)
上一篇 2022年7月15日 上午8:16
下一篇 2022年7月15日 上午8:16


相关推荐

  • 解除华为学生模式的6种方法

    解除华为学生模式的6种方法华为学生模式的6种方法,已经过作者测试。

    2022年5月1日
    2.1K
  • python 运行shell命令

    python 运行shell命令在 python 中实现运行多条 shell 命令今天小编就为大家分享一篇在 python 中实现运行多条 shell 命令 具有很好的参考价值 希望对大家有所帮助 一起跟随小编过来看看吧使用 py 时可能需要连续运行多条 shell 命令 coding UTF 8importsysre sys sys setdefaulten utf8 importsubpro os system cmd1 amp amp

    2026年3月19日
    3
  • c语言 const常量作用,C语言 const常量讲解

    c语言 const常量作用,C语言 const常量讲解const 的本质 const 本质上是伪常量 无法用于数组初始化以及全局变量初始化 原因在于 const 仅仅限定变量无法直接赋值 但是却可以通过指针间接赋值 例如局部常量在栈区 而不在静态区 静态区会一直存在 也不在代码区 代码区只读 禁止修改 include include const 与 define 的区别 defineX10 0constintY 9 0 赋值时会自动

    2026年3月17日
    2
  • Stata做空间杜宾模型、莫兰指数等操作

    Stata做空间杜宾模型、莫兰指数等操作以下内容完全由本人在实际操作中搜集整理总结得到,很细致的介绍:从如何在stata中导入数据,怎么定义面板数据,再到如何做局部和全局空间相关性检验(莫兰指数)和空间杜宾模型等。1、导入面板数据在excel中输入如下格式的数据:打开STATA,data-dataeditor-dataeditor(edit),将excel中数据复制上去接着在STATA主界面的comm…

    2022年6月25日
    62
  • oracle怎么使用触发器,Oracle触发器的使用[通俗易懂]

    oracle怎么使用触发器,Oracle触发器的使用[通俗易懂]Oracle触发器的使用触发器是指存放在数据库中,并被隐藏执行的存储过程。在Oracle8i之前,只允许基于表或视图的DML操作(insert,update,delete)建立触发器,在oracle8i之后,不仅支持DML操作,也允许基于系统事件(启动数据库,关闭数据库,登录)和DDL操作建立触发器。一、触发器简介触发器是指隐含执行的存储过程,它可以使用PL/SQL,java和C进行开发,当发生特…

    2022年7月11日
    19
  • effective C++ 读书笔记 条款08「建议收藏」

    effective C++ 读书笔记 条款08

    2022年2月7日
    47

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

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