jggrid标红列和动态标红行的几种方法

最新推荐文章于 2025-05-08 15:38:50 发布

ccessl

最新推荐文章于 2025-05-08 15:38:50 发布

阅读量2.2k

点赞数

CC 4.0 BY-SA版权

分类专栏： jQuery 文章标签： javascript jggrid

本文链接：https://blog.youkuaiyun.com/cc_fys/article/details/73065406

jQuery 专栏收录该内容

15 篇文章

订阅专栏

本文介绍了如何在使用jggrid显示表格时，动态地对特定列或行进行标红以突出重要数据。通过在colModel的formatter中设置样式，以及根据数据动态添加行样式来实现这一功能。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

在用jggrid显示表格的时候，我们有时候需要特别标出重点的一些数据。有时候是一列数据，有时候是一行数据。对于动态的数据，我们需要根据其中的内容标红或者突出显示某些数据。这里总结了一些方式。用其它的方法突出数据同理，这里用标红来突出数据。

1：标红一列数据

比如最后一列数据我们要标出，可以直接在jggrid的colModel中的formatter返回需要的格式：

	            colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],
	            colModel : [ 
	                         {name : 'id',index : 'id',width : 55,align:'center'}, 
	                         {name : 'invdate',index : 'invdate',width : 90,jsonmap : "invdate",align:'center'},
	                         {name : 'name',index : 'name asc, invdate',width : 100}, 
	                         {name : 'amount',index : 'amount',width : 80,align : "right",align:'center'}, 
	                         {name : 'tax',index : 'tax',width : 80,align : "right",align:'center'}, 
	                         {name : 'total',index : 'total',width : 80,align : "right",align:'center'}, 
	                         {name : 'note',index : 'note',width : 150,sortable : false,align:'center',formatter : function(cellvalue,options,rowObj){
	                        	    temp='';
		 		                  	if(cellvalue!=""&&cellvalue!=null)
		 		                  	 temp="<span style='color:red;'>"+cellvalue+"</span>"; 
		 		                  	 return temp;
				                       }} 
	                       ],

2：标红一列数据

我们可以先写样式比如：

<style>
  tr.markRed
   {
       color:#FF0000;
   }
</style>

假如根据Tax这一列数据，当tax大于80的时候标红这一行

F12看表格结构，每一行有一个ID号，给一行添加样式

$('#tables').jqGrid({
				url:myUrl+'getTableData',
				datatype:'json',
				mtype:'post',
				postData:postData,//传递额外参数
			    jsonReader : {
				      root:"rows",
				      page: "page",
				      total: "total",
				      records: "records",
				      repeatitems: false,
				      //id: "0"//设置行的ID
				   }, 
	            styleUI: 'Bootstrap',
	            colNames : [ 'Inv No', 'Date', 'Client', 'Amount', 'Tax','Total', 'Notes' ],
	            colModel : [ 
	                         {name : 'id',index : 'id',width : 55,align:'center'}, 
	                         {name : 'invdate',index : 'invdate',width : 90,jsonmap : "invdate",align:'center'},
	                         {name : 'name',index : 'name asc, invdate',width : 100}, 
	                         {name : 'amount',index : 'amount',width : 80,align : "right",align:'center'}, 
	                         {name : 'tax',index : 'tax',width : 80,align : "right",align:'center'}, 
	                         {name : 'total',index : 'total',width : 80,align : "right",align:'center'}, 
	                         {name : 'note',index : 'note',width : 150,sortable : false,align:'center'} 
	                       ],
				width :600,
				autoencode : 'utf-8',
				altRows : true,//设置奇偶行
				shrinkToFit : true,
				autowidth : true,
				height : 550,
				rowList : [ 5, 20, 30 ],
		        jsonReader : {
		            repeatitems : true,
		            id : "0"
		          },
				pager : '#page',
				viewrecords : true,
				sortable : true,
				caption : '设计',
				 gridComplete: function(data){
				    var colCondition1= $('#tables').jqGrid('getCol','tax',false);
				    var id= $('#tables').jqGrid('getCol','id',false);
 	            	for(var i=0;i<colCondition1.length;i++)
 	            		{
 	            		var tax=Number(colCondition1[i]);
 	            		var rowid=id[i];
 	            		if(tax>80)
 	            			{
 	            			//标红 
 	            			console.log(tax);
 	            			console.log(rowid);
 	            			$('#tables').find('#'+rowid).addClass('markRed'); 
 	            			console.log($('#tables').find('#'+(i+1)));
 	            			}
 	            		} 
				 },
				loadComplete:function (data) {
					var JSONdata=JSON.parse(data);
					$('#tables').clearGridData()[0].addJSONData(JSONdata);
           		  	$("tr.jqgrow:odd").addClass('oddClass');  
            }
			});

注意要写在gridComplete里面，不能写在loadComplete里面