对easyui datagrid 进行扩展拉动滚动条到底部自动加载数据《二》

利用jquery 对easyui datagrid进行了一个更好的扩展

js代码：

//对jquery进行扩展，调用的时候只需要需要调用$.pan.load(options)即可,传入对象参数

(function($) {
	$.extend( {
		pan:{
			load : function(options) {
				//自动设置属性
				for(var item in options){
					AutoLoad[item]=options[item];
				}
				AutoLoad.load();
			},
			merge:function(json){
				AutoLoad.merge(json);
			}
		}
	})
})(jQuery);

var auto_sign=false;

//datagrid滚动条拉动自动加载数据
var AutoLoad={
	rowCount:20,		//每次加载的数量
	open:false,			//默认关闭
	page:1,				//当前所在的页
	num:10,				//每一页的数量
	dg:null,			//datagrid对象
	panel:null,			//要注册事件的容器对象
	url:null,			//url
	form:null,			//表单
	json:null,			//json对象
	load:function(){	//执行
	
		if(AutoLoad.dg==null){
			AutoLoad.dg=datagrid;
		}
		if(AutoLoad.form==null){
			AutoLoad.form='"#searchForm"';
		}

		//不设为0 将会导致一个循环加载的bug
		$(AutoLoad.panel).scrollTop(0);
		
		if(auto_sign)return;//不允许重复注册事件
		//alert('调用了');
		//初始位置为0 
		
		$(AutoLoad.panel).scroll(function(){
			auto_sign=true;
			if(!AutoLoad.open)return;
			
			  var sheight = $(this)[0].scrollHeight;
	          var top=$(this)[0].scrollTop;
	          var height=$(this).height();
	          
	          //判断是否到达底部
	          //document.title='top:'+(sheight-(top+height));
	          if((sheight-(top+height))==0){
	        	  
		        	//请求json
					//拼接表单的值
	        	  
					var url=AutoLoad.url;
					url+='?params=xxx';
					var params='';
					$(AutoLoad.form).find('input').each(function(index){
						var obj=$(this);
						if(obj.prop('name')!=''&&obj.val()!=''){
							params+='&'+obj.prop('name')+'='+obj.val();
						}
					});
					
					//获取行数
					var row=AutoLoad.dg.datagrid('getRows').length;
	
					var page=parseInt(((row-1)/AutoLoad.num)+1+1); //求出下一页
					AutoLoad.page=page;
					url+=params+'&page='+page+'&rows='+AutoLoad.rowCount;
					//请求数据
					$.post(url,function(data){
						var json=$.parseJSON(data).rows;
						if(json=='undefined'||json==null){
							json=$.parseJSON(data);
						}
						AutoLoad.json=json;
						for(var i=0;i<json.length;i++){
							AutoLoad.dg.datagrid("appendRow",json[i]);
						}
						//返回单次请求的json数据
						AutoLoad.bind(json);
						$(AutoLoad.panel).scrollTop($(AutoLoad.panel).scrollTop()-10);
					});
										        	
		        }
			});
	
	},
	bind:function(json){
		
	},
	merge:function(json){

		var index=json.length;

		for(var i=0;i<AutoLoad.json.length;i++){
			json[index++]=AutoLoad.json[i];
		}
		return json;
	}
		
};

用法：

$.pan.load({
	open:true,//配置是否开启
	dg:$("#mytable"),//datagrid对象
	panel:"#mydialog .panel .panel-body",//需要注册滚动条事件的容器
	url:'${pageContext.request.contextPath}/spgl/goodsAction!noAuth_search.html',//请求json的url
	form:'#searchForm',//表单id
	bind:function(d){//当数据追加到表格中之后，会回调这个方法，d是每次请求的json对象
	//返回的结果和当前的json合并
	$.pan.merge(json);//这个方法是，传入json对象，对每次请求的json数据和该对象进行合并
	}
});