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)


相关推荐

  • TCP拥塞控制原理

    TCP拥塞控制原理TCP拥塞控制原理:TCP使用的是端到端的拥塞控制而不是网络辅助的拥塞控制,因为IP曾不想端系统提供显示的网络拥塞反馈。TCP采用的方法是让每一个发送方根据所感知到的网络拥塞的程度,来限制其能向连接发送流量的速率。这种方法有三个问题: 一个TCP发送方是如何限制向连接发送流量的速率? 一个TCP发送方是如何感知它到目的地之间的路径上存在拥塞的呢?

  • webpack最新版本是多少_webpack不是内部或外部命令

    webpack最新版本是多少_webpack不是内部或外部命令如何查看当前项目webpack版本在项目package.json中的scripts脚本命令中写入以下内容”webpack”:”webpack–version”然后打开终端在项目根路径下运行:npmrunwebpack…

  • JDBC_3 数据库事物

    JDBC_3 数据库事物数据库事务数据一旦提交,就不可回滚那些操作会导致数据的自动提交?DDL操作一旦执行,都会自动提交-. set autocommit = false不起作用DML默认情况下,一旦执行就会自动提交-. 可以设置set autocommit = false关闭连接的时候会自动提交 Connection connection = DriverManager.getConnection(url, user, password); connection.setAutoCommit

  • 百度–计算机安全

    百度–计算机安全木马终结 …电脑病毒是什么东西呢?是否会像其他病毒,如“H5N1”、“O-157大肠杆菌”、“HIV”一样对人体造成伤害呢?电脑病毒是会造成伤害,但不是对你造成伤害,而是对你的电脑系统造成一定的伤害。其实,电脑病毒是一段非常小的(通常只有几KB)会不断… 14508字 2007-06-20 popo8819 C盘杀手 …病毒病毒名称 : W97M/Thus.A 别名:C盘杀手 病毒特点

  • java springboot中调用第三方接口「建议收藏」

    java springboot中调用第三方接口「建议收藏」调用第三方接口,记录下自己写的不然忘记。依然是废话不喜欢多说,上代码:application.yml配置server:port:7888servlet:context-path:/genetomcat:remote-ip-header:x-forward-foruri-encoding:UTF-8max-threa…

  • 这10个Redis使用技巧,提升90%工作效率(建议收藏)

    前言 Redis 在当前的技术社区里是非常热门的。从来自 Antirez 一个小小的个人项目到成为内存数据存储行业的标准,Redis已经走过了很长的一段路。随之而来的一系列最佳实践…

发表回复

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

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