JqGrid做翻页三

为什么80%的码农都做不了架构师？>>>   

【适用范围】：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;
}

 

转载于:https://my.oschina.net/whome/blog/808924