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)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 全网最全python爬虫精进

    全网最全python爬虫精进4.25(第一天)**第0关认识爬虫**1、初始爬虫爬虫,从本质上来说,就是利用程序在网上拿到对我们有价值的数据。2、明晰路径2-1、浏览器工作原理(1)解析数据:当服务器把数据响应给浏览器之后,浏览器并不会直接把数据丢给我们。因为这些数据是用计算机的语言写的,浏览器还要把这些数据翻译成我们能看得懂的内容;(2)提取数据:我们就可以在拿到的数据中,挑选出对我们有用的数据;(3)存储数据:将挑选出来的有用数据保存在某一文件/数据库中。2-2、爬虫工作原理(1)获取数据:爬虫程序会根据

    2022年5月27日
    34
  • SpringBoot连接使用PostgreSql数据库

    SpringBoot连接使用PostgreSql数据库目录一、介绍1、情况说明2、安装软件及依赖包二、配置连接数据库其他情况一、介绍1、情况说明在这里我使用SpringBoot配置Mybaits连接到PostgreSql数据库的。我的源码也会提供给大家(此文末尾),效果如下数据库:运行效果:2、安装软件及依赖包完整搭建SpringBoot及依赖包:https://blog.csdn.net…

    2022年6月25日
    42
  • js中Math.random()生成指定范围数值的随机数

    js中Math.random()生成指定范围数值的随机数

    2021年11月3日
    51
  • android:layout_gravity和android:gravity的区别

    android:layout_gravity和android:gravity的区别1.首先来看看android:layout_gravity和android:gravity的使用区别。android:gravity:这个是针对控件里的元素来说的,用来控制元素在该控件里的显示位置。例如,在一个Button按钮控件中设置如下两个属性,android:gravity=”left”和android:text=”提交”,这时Button上的文字“提交”将会位于Button的左

    2022年7月26日
    5
  • db4o数据库文件_繁忙的Java开发人员指南db4o,使用db4o进行数据库重构

    db4o数据库文件_繁忙的Java开发人员指南db4o,使用db4o进行数据库重构存档日期:2019年5月13日|首次发布:2007年5月22日重构Java™代码比重构关系数据库要简单得多,但是幸运的是,对象数据库的情况并非如此。在《繁忙的Java开发人员db4o指南》的这一期中,TedNeward向您介绍了他最喜欢的对象数据库的另一个优点:db4o将重构简化到几乎没有用处。此内容不再被更新或维护。全文以PDF格式“按原样”提供。随着技术的飞速发展,…

    2022年7月21日
    12
  • Java 集合类图[通俗易懂]

    Java 集合类图[通俗易懂]有序否允许元素重复否Collection否是List是是SetAbstractSet否否HashSetTreeSet是(用二叉树排序)MapAbstractMap否使用key-value来映射和存储数据,Key必须惟一,value可以重复HashMapTreeMap是(用二叉树排序)

    2022年5月25日
    40

发表回复

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

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