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

来源：互联网发布：淘宝刷流量软件排名编辑：程序博客网时间：2024/06/06 01:29

在用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里面

阅读全文

0 0