对easyui datagrid 进行扩展拉动滚动条到底部自动加载数据《二》
2013-08-08 15:24
681 查看
利用jquery 对easyui datagrid进行了一个更好的扩展
js代码:
用法:
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数据和该对象进行合并 } });
相关文章推荐
- 对easyui datagrid 进行扩展拉动滚动条到底部自动加载数据一
- 对easyui datagrid 进行扩展拉动滚动条到底部自动加载数据《二》
- 对easyui datagrid进行扩展,当滚动条拉直最下面就异步加载数据。
- easyui datagrid 异步加载数据时滚动条有时会自动滚到最底部的问题
- 对easyui datagrid进行扩展,当滚动条拉直最下面就异步加载数据
- 对easyui datagrid进行扩展,当滚动条拉直最下面就异步加载数据。
- jQuery实现当拉动滚动条到底部加载数据
- 扩展easyui.datagrid,实现加载数据遮罩效果代码
- jQuery实现当拉动滚动条到底部加载数据
- js当滚动条即将到达底部自动加载数据
- jQuery实现当拉动滚动条到底部加载数据
- jQuery实现当拉动滚动条到底部加载数据
- jQuery实现当拉动滚动条到底部加载数据
- jQuery实现当拉动滚动条到底部加载数据
- 在前端页面对easyui中的datagrid与jqgrid加载后的数据进行操作
- 滚动条到底部,自动加载数据
- EasyUI之datagrid从java服务器自动填充数据
- UWP-ListView到底部自动加载更多数据
- [转]Datagridview中的数据很多,加载完数据后滚动条自动到最下边的方法
- Android数据分批加载-滑动到底部自动加载列表