JqGrid作翻頁三

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

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

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

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

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

實現的js代碼以下：

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

var isClick = true;
$("#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;
        			}
        		}
        	}
  var rowid = $(this).jqGrid('getGridParam', 'selarrrow');
        	if(allData.length == rowid.length){
        		$('#leftMeterPanel').find("#cb_meter_jq_table").prop('checked',true);
        	}
        	//加載數據完成後執行
        	if(current_id==-1) 
//移除能保持最後一個單選行的樣式
$('#meter_jq_table').find("tr[role='row']").removeClass('sys-ui-status-highlight');
$("#"+current_id).addClass('sys-ui-status-highlight');//保持最後一個單選行的樣式
    			for(var i=0;i<rowid.length;i++){
        			if(rowid[i]!=current_id){
        				$("#"+rowid[i]).addClass('sys-ui-status-multi');
        			}
        		}
        },
        onCellSelect:function(id,status){
   //移除能保持最後一個單選行的樣式
        	$(this).find("tr[role='row']").removeClass('sys-ui-status-highlight');
        	if(iCol){//單選
    //覆蓋默認樣式，保持原樣不變
        		$(this).find("tr[role='row']").addClass('sys-ui-status-multi');
        		$("#"+id).removeClass('sys-ui-status-multi');//啓用默認樣式
    //isClick確保$("#"+id).click();執行一次
        		if($("#jqg_meter_jq_table_"+id).is(":checked") && isClick){
        			isClick = false;
        			$("#"+id).click();//jQuery觸發行點擊事件
        		}else{
        			isClick = true;
        			current_id = id;
        			if(_arrGlobalData .indexOf(id)==-1){
            				_arrGlobalData .push(id);
            			}
    //這裏能夠寫點擊觸發事件
        			meterObjEvent(id);
        		}
        	}else{//多選
        		$("#"+current_id).addClass('sys-ui-status-highlight');//保持最後一個單選行的樣式
        		if(id != current_id){
        			$("#"+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){
        	$("#"+current_id).addClass('sys-ui-status-highlight');//保持最後一個單選行的樣式
        	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;
}
.sys-ui-status-highlight{
	border: 1px solid #fad42e !important;
    background: #fbec88 !important;
    color: #363636;
}