JqGrid作翻頁二

【適用範圍】：web系統中的頁面對應含有對象區表格數據選擇

1.記錄翻頁後前頁的所選行狀態

2.點擊非含複選框單元格的單元格觸發單擊事件

3.點擊含複選框的單元格爲多選模式

4.單選後對應行復選框狀態爲選中狀態，同時其餘行復選框爲反選狀態，選中的行在再擊不執行反選狀態，能夠觸發單擊事件，多選時不觸發任何事件（包括最後一次單選狀態），但保證頁面操做時能獲取到所選中的id集合

實現的js代碼以下：

var current_id = -1;//當前單選選中的id
var _arrGlobalData = new Array(); //全局的緩存變量，存儲所選的id

$("#jq_table").jqGrid('GridUnload');
jQuery("#jq_table").jqGrid({
	data:data,
	datatype : "local",
	colNames : [ 'id','Item1', 'Item2' ,......],
	colModel : [ 
		{name : 'id',index : 'id',width:70, hidden:true},
		{name : 'item1',index : 'item1',sortable:true,width:70}, 
		{name : 'item2',index : 'item2',width:70},
   ........
	],
	rowNum : 5,
        rowList : [ 5,10,15 ],
        width: '244',
        height : autoHeight,
        pager : '#jq_table_jqpager',
        autoScroll: true,
        multiselect: true, //控制多選
        viewrecords: false,
        gridComplete:function(){
        	var allData = $(this).jqGrid('getDataIDs');//獲取當頁全部行的id
        	var oldData = _arrGlobalData ;
        	for(var i = 0; i < allData.length; i++){
        		for(var j = 0; j < oldData.length; j++){
        			if(allData[i]==oldData[j]){
        				$('#jq_table').jqGrid('setSelection', allData[i], false);
        				break;
        			}
        		}
        	}
 //加載數據完成後執行
        	if($(this).getGridParam("multiboxonly")){//單選
        		$(this).find("tr[role='row']").removeClass('sys-ui-status-multi');
        	}else{//多選
        		for(var i=0;i<rowid.length;i++){
            			if(rowid[i]!=current_id){
            				$("#"+rowid[i]).addClass('sys-ui-status-multi');
            			}
            		}
        	}
        },
        onCellSelect:function(id,status){
 if(iCol){//單選
        		$(this).jqGrid('setGridParam',{
            		multiboxonly:true
        		});
   //移出多選的樣式，變爲單選默認樣式
        		$(this).find("tr[role='row']").removeClass('sys-ui-status-multi');
        		_arrGlobalData =[];
        		_arrGlobalData .push(id);
        		current_id = id;
   //這裏能夠寫點擊觸發事件
        		meterObjEvent(id);
        	}else{//多選
        		$(this).jqGrid('setGridParam',{
            		multiboxonly:false
        		});
        		$("#"+id).addClass('sys-ui-status-multi'); //多選當前行添加樣式
        	}
        },
onSelectRow:function(id,status){
        	var rowid = $(this).jqGrid('getGridParam', 'selarrrow');
        	if(status==false){
        		$("#"+id).removeClass('sys-ui-status-multi'); //移除多選當前行樣式
        		_arrGlobalData .splice(_arrGlobalData .indexOf(id),1);
    		}
        	for(var i=0;i<rowid.length;i++){
        		if(_arrGlobalData .indexOf(rowid[i])==-1){
        			_arrGlobalData .push(rowid[i]);
        		}
        	}
        },
        onSelectAll: function(ids,status){
        	if(status==false){
        		for(var k=0;k<ids.length;k++){
        			_arrGlobalData .splice(_arrGlobalData .indexOf(ids[k]),1);
        			if(ids[i]!=current_id){
            			$("#"+ids[i]).removeClass('sys-ui-status-multi');
            		}
        		}
    		}else{
    			for(var i=0;i<ids.length;i++){
            		if(_arrGlobalData .indexOf(ids[i])==-1){
            			_arrGlobalData .push(ids[i]);
            		}
            		if(ids[i]!=current_id){
            			$("#"+ids[i]).addClass('sys-ui-status-multi');
            		}
            	}
        },
	    caption : "實現翻頁"
    });

附加樣式：

.sys-ui-status-multi {
	border: 1px solid #A6C9E2 !important;
    background: #FEFFFF !important;
    color: #363636;
}