JqGrid做翻页一

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

【适用范围】：web系统中不同的页面对应对象区表格数据选择的模式不同，单选或多选控制

【弊端】：单选和多选模式不能共存

1.记录翻页后前页的所选行状态

2.获取数据库中选中模式的配置，单选或多项

实现的就是代码如下：

var _arrGlobalData = new Array(); //全局的缓存变量，存储所选的id
var isMultiSelect = true;  //是否多选 true 多选  false 单选

$("#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;
        			}
        		}
        	}
        },
        onSelectRow:function(id,status){
        	var rowid = $(this).jqGrid('getGridParam', 'selarrrow');
        	if(!isMultiSelect){
        		_arrGlobalData = rowid;
        	}else{
        		if(status==false){
        			_arrGlobalData .splice(_arrGlobalData .indexOf(id),1);
        		}
            	for(var i=0;i<rowid.length;i++){
            		if(_arrGlobalData .indexOf(rowid[i])==-1){
            			_arrGlobalData .push(rowid[i]);
            		}
            	}
        	}
        	if(status){
        		//这里可以写点击触发事件
        	}
        },
        onSelectAll: function(ids,status){
        	if(status==false){
        		for(var k=0;k<ids.length;k++){
        			_arrGlobalData .splice(_arrGlobalData .indexOf(ids[k]),1);
        		}
    		}else{
    			for(var i=0;i<ids.length;i++){
            		if(_arrGlobalData .indexOf(ids[i])==-1){
            			_arrGlobalData .push(ids[i]);
            		}
            	}
    		}
        },
	    caption : "实现翻页"
    });

下边的方法为动态控制单选多选，data参数可为数据动态获取的配置，获取data后触发下边方法即可

function jqgridSet(data){
isMultiSelect = data;
jQuery("#jq_table").jqGrid('setGridParam',{
	        	multiboxonly:false,
	        	beforeSelectRow: function(rowid, e){  
    	                	return true;  
            		}
        	});
  $("#jq_table").find("#jqgh_jq_table_cb").find("#cb_jq_table").attr("disabled",false);
		if(!isMultiSelect) {//单选
	    		jQuery("#jq_table").jqGrid('setGridParam',{
	            		multiboxonly:true,
	            		beforeSelectRow: function(rowid, e){
	            			jQuery("#jq_table").jqGrid('resetSelection');
	    	                	return true;  
	            		}
	        	});
	    		if(_arrGlobalData.length>1){
	    			var oldData = new Array();
	    			for(var k=0; k<_arrGlobalData.length; k++){
	    				oldData.push(_arrGlobalData[k]);
	    			}
	    			for(var i=0; i<oldData.length-1;i++){
	    				jQuery("#jq_table").jqGrid('setSelection', oldData[i]);
	    			}
	    			var rowids = jQuery("#jq_table").jqGrid('getGridParam', 'selarrrow');
	    			if(rowids.length<=0){
	    				var allData = jQuery("#jq_table").jqGrid('getDataIDs');
	    				jQuery("#jq_table").jqGrid('setSelection', allData[allData.length-1]);
	    			}
	    		}
	     	       $("#jq_table").find("#jqgh_jq_table_cb").find("#cb_jq_table").attr("disabled",true);
	        }
}

 

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