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;
}