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


相关推荐

  • ubuntu安装中文输入法搜狗_中文输入法怎么调出来

    ubuntu安装中文输入法搜狗_中文输入法怎么调出来请注意命令中不应该的空格可能导致命令不合法!一、检查fctix框架首先,要安装中文输入法,必须要保证系统上有fctix。fctix是一个以GPL方式发布的输入法框架,安装fctix后可以为操作系统的桌面环境提供一个灵活的输入方案,解决在GNU/Linux环境下安装中文输入法的问题。win+a打开所有应用程序,找到Language…

    2022年9月26日
    0
  • PYTHON主机_我的Python世界PDF

    PYTHON主机_我的Python世界PDF学了好长一段时间Python了,前段时间想找个支持Python(Django)的空间来试试。国外的主机虽然性价比高(都是按G来算),但是没有美元也没有信用卡,就没法了。国内的支持Python(Django)的空间还真是少,我找了好几天就看到两个比较好的:捌号主机和浪点 。但是捌号主机的空间也真是有够贵的,是便宜的也是好几百。最后我选择了浪点的空间。浪点的空间要普通级以上才能开通

    2022年10月10日
    0
  • PyCharm激活码永久有效PyCharm2019.1.1激活码教程-持续更新,一步到位[通俗易懂]

    PyCharm激活码永久有效PyCharm2019.1.1激活码教程-持续更新,一步到位[通俗易懂]PyCharm激活码永久有效2019.1.1激活码教程-Windows版永久激活-持续更新,Idea激活码2019.1.1成功激活

    2022年6月19日
    42
  • 1.两数之和-Python-LeetCode

    1.两数之和-Python-LeetCode刚开始接触算法方面,好多都不懂,打算每刷一题就整理一下题目:给定一个整数数列,找出其中和为特定值的那两个数。你可以假设每个输入都只会有一种答案,同样的元素不能被重用。示例:给定nums=[2,7,11,15],target=9因为nums[0]+nums[1]=2+7=9所以返回[0,1]解法一:.刚开始看到的的时候,第一个想到的就是用一个嵌套循环把n…

    2022年6月8日
    26
  • Android 调用微信小程序支付badparam_微信定时发消息

    Android 调用微信小程序支付badparam_微信定时发消息最近一项目需要添加微信的分享:朋友、朋友圈。原本以为挺简单的一事,无非就是去官网下个Demo,集成到自己项目中,可以分分钟搞定,结果这帮写文档的坑爹玩意,愣是浪费了我N多时间,好了吐槽完毕,接下来分享下此次调用微信中遇到的问题和解决方法:首先第一个问题:死活调不出微信客户端原因:是没有按照所谓的官方说明来操作,解决方法:1)对要加微信的项目进行打包签名,此时就有了自己的

    2022年9月1日
    2
  • 深究递归和迭代的区别、联系、优缺点及实例对比「建议收藏」

    深究递归和迭代的区别、联系、优缺点及实例对比「建议收藏」深究递归和迭代的区别、联系、优缺点及实例对比1.概念区分递归的基本概念:程序调用自身的编程技巧称为递归,是函数自己调用自己.一个函数在其定义中直接或间接调用自身的一种方法,它通常把一个大型的复杂的问题转化为一个与原问题相似的规模较小的问题来解决,可以极大的减少代码量.递归的能力在于用有限的语句来定义对象的无限集合.使用递归要注意的有两点:1)递归就是在过程或函数里面调用自身;

    2022年6月5日
    41

发表回复

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

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