您的位置:首页 > 产品设计 > UI/UE

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

2013-08-08 15:24 681 查看
利用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数据和该对象进行合并
}
});
内容来自用户分享和网络整理,不保证内容的准确性,如有侵权内容,可联系管理员处理 点击这里给我发消息
标签:  扩展 datagrid JSON