jqgrid改变某一行的背景颜色

最新推荐文章于 2021-04-22 14:39:46 发布

棠梨染青衣

最新推荐文章于 2021-04-22 14:39:46 发布

阅读量1w

点赞数 4

分类专栏： JavaScrip html jqgrid 文章标签： jqgrid 更改某一行背景

本文链接：https://blog.csdn.net/cx8218/article/details/81221989

版权

html 同时被 3 个专栏收录

11 篇文章 0 订阅

订阅专栏

JavaScrip

9 篇文章 1 订阅

订阅专栏

jqgrid

2 篇文章 0 订阅

订阅专栏

想要在jqgrid表格中更改某些行的背景颜色，比如改变“提示”是0的这些行的背景颜色为红色。

<!DOCTYPE html>
<html>
  	<head>
    	<title>jqGrid 实例</title>
    	<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
    	<link rel="stylesheet" type="text/css" href="jqgrid/css/ui.jqgrid.css">
		<link rel="stylesheet" type="text/css" style="white-space:pre" href="jqgrid/jquery.ui/jquery-ui.css">
		<script type="text/javascript" src="jqgrid/js/jquery-1.11.0.min.js"></script>
		<script type="text/javascript" src="jqgrid/js/i18n/grid.locale-cn.js"></script>
		<script type="text/javascript" src="jqgrid/js/jquery.jqGrid.min.js"></script>
		<script type="text/javascript" src="jqgrid/jquery.ui/jquery-ui.js"></script>
  	</head>
  	<body>
  		<div>
  			<table id="list9"></table>
    		<div id="pager9"></div>
  		</div>    	
  	</body>
  	<script>
		$(function(){
	  		pageInit();
		});
		function pageInit(){
	  		jQuery("#list9").jqGrid(
	      	{
	        	url : 'data/JSONData.json',
	        	datatype : "json",
	        	colNames : [ '序号', '状态', '名字', '数量', '提示','总计', '备注' ],
	        	colModel : [ 
	                     	{name : 'id',index : 'id',width : 55}, 
	                     	{name : 'state',index : 'state',width : 90}, 
	                     	{name : 'name',index : 'name',width : 100}, 
	                     	{name : 'amount',index : 'amount',width : 80,align : "right"}, 
	                     	{name : 'tax',index : 'tax',width : 80,align : "right"}, 
	                     	{name : 'total',index : 'total',width : 80,align : "right"}, 
	                     	{name : 'note',index : 'note',  width : 150,sortable : false} 
	                   	],
	        	rowNum : 10,
	        	rowList : [ 10, 20, 30 ],
	        	pager : '#pager9',
	        	sortname : 'id',
	        	recordpos : 'left',
	        	viewrecords : true,
	        	sortorder : "desc",
	        	multiselect : true,
	        	caption : "Multi Select Example",
	        	loadComplete: function () {             
	        		//debugger;
	        		//在表格加载完成后执行
					var ids = $("#list9").jqGrid("getDataIDs");//获取所有行的id
					var rowDatas = $("#list9").jqGrid("getRowData");//获取所有行的数据
					for(var ii=0;ii < rowDatas.length;ii++){
					    var rowData = rowDatas[ii];					 
				        if(rowData.tax == 0){//如果某一行中的“tax”为0，那就把这一整行的背景颜色设为红色
				            $("#"+ids[ii]+ " td").css("background-color","red");
				        }
					}
            	} 
	      	});
	  	jQuery("#list9").jqGrid('navGrid', '#pager9', {
	    	add : false,
	    	del : false,
	    	edit : false,
	    	position : 'right'
	  	});
	  	jQuery("#m1").click(function() {
	    	var s;
	    	s = jQuery("#list9").jqGrid('getGridParam', 'selarrrow');
	    	alert(s);
	  	});
	  	jQuery("#m1s").click(function() {
	    	jQuery("#list9").jqGrid('setSelection', "13");
	  	});
	}
  </script>
</html>

这个要注意一定要在表格加载完成后才执行更改背景色的代码，不然无法获取表格的所有id和数据，这样就找不到要更改背景色的行了！

棠梨染青衣

关注

4
点赞
踩
5

收藏

觉得还不错? 一键收藏
3
评论
jqgrid改变某一行的背景颜色

想要在jqgrid表格中更改某些行的背景颜色，比如改变“提示”是0的这些行的背景颜色为红色。&lt;!DOCTYPE html&gt;&lt;html&gt; &lt;head&gt; &lt;title&gt;jqGrid 实例&lt;/title&gt; &lt;meta http-equiv="Content-Type" content="text/h
复制链接

扫一扫