对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数据和该对象进行合并
}
});