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

时间:2022-12-04 18:50:02

以下方法是通用的,只要把datagrid定义为全局的即可,其他部分的代码不用进行修改!

可以把以下代码放入到一个单独的js文件,然后再需要的页面引入即可!

$(function(){  
  
            try{  
                $(".datagrid-body").scroll(function(){  
                      var sheight = $(this)[0].scrollHeight;  
                      var top=$(this)[0].scrollTop;  
                      var height=$(this).height();  
                      //判断是否到达底部  
                      document.title='top:'+(top+height)+' heigth:'+(sheight-20);  
                      if((top+height)+20==sheight){  
                            document.title=datagrid.datagrid('options').url;  
                            //请求json  
                            //page;// 当前页  
                            //rows;// 每页显示记录数  
                            //拼接表单的值  
                            var url=datagrid.datagrid('options').url;  
                            url+='?params=xxx';  
                            var params='';  
                            $("#searchForm").find('input').each(function(index){  
                                var obj=$(this);  
                                if(obj.prop('name')!=''&&obj.val()!=''){  
                                    params+='&'+obj.prop('name')+'='+obj.val();  
                                }  
                            });  
                            //获取页码、每次默认加载10条  
                            var num=10;  
                            //获取行数  
                            var row=datagrid.datagrid('getRows').length;  
  
                            var page=(row/num)+1; //求出下一页  
                            //$.post();  
                            url+=params+'&page='+page+'&rows=10';  
  
                            //请求数据  
                            $.post(url,function(data){  
                                var json=$.parseJSON(data).rows;  
                                  
                                for(var i=0;i<json.length;i++){  
                                    //自动拼接字段和赋值  
                                      
                                    var row='';  
                                    for(var item in json[i]){  
                                        row+='"'+item+'":'+'"'+json[i][item]+'",';  
                                    }  
                                    row=row.substring(0,row.length-1);  
                                    row='{'+row+'}';  
                                    row=$.parseJSON(row);  
                                    datagrid.datagrid("appendRow",row);  
                                }  
                            });  
                                                              
                        }else{  
                            document.title='滚动条没有到达底部';  
                        }  
                });  
            }  
            catch(e){  
                alert(e);     
            }  
  
        });