EasyUI Datagrid 客户端分页详解

最近在做一个小型的成绩管理系统,需要用到EasyUI Datagrid的分页功能,考虑到数据量较少(只有一个班级),于是选择客户端分页。在网上能找到的客户端分页demo基本都是同一段代码,但没有注释,下面是我根据自己的理解和调试分析写上的代码以及注释,希望能帮助大家理解EasyUI Datagrid客户端分页的执行过程

首先是Datagrid初始化代码:

$('#dg').datagrid({
            pagination:"true",
            rownumbers:"true",
            method:"get",
            toolbar:"#tb",
            pageList:[3,10],
            //每次表格加载数据都会调用此拦截器
            loadFilter:pagerFilter
        });

EasyUI Datagrid 客户端分页详解_第1张图片

pagerFilter函数:

function pagerFilter(data)
    {
        //这个函数为每次表格加载数据的过滤函数,data中包含原始数据,返回的是真正要显示出来的数据
        //获取Datagrid对象
        var dg = $(this);
        //获取选项对象,此处该对象用于保存分页时的相关信息
        var opts = dg.datagrid('options');
        //获取分页器
        var pager = dg.datagrid('getPager');
        //重写表格所使用分页器的onSelectPage方法,此方法在用户选择新的页面时触发,即改变pageNum或pageSize时触发
        //此处真正的翻页逻辑并不在onSelectPage方法里面,可以看到在该方法中仅仅是将新页面的参数(pageNum, pageSize)保存在opts对象中,
        //这两个参数在后面的代码中被使用
        pager.pagination({
            onSelectPage:function(pageNum, pageSize){
                opts.pageNumber = pageNum;
                opts.pageSize = pageSize;
                //下面注释的代码我暂时不明白有什么作用,没有他们分页功能仍然能够正确实现
//                pager.pagination('refresh',{
//                    pageNumber:pageNum,
//                    pageSize:pageSize
//                });
                //此处loadData方法会加载本地数据,即data中的数据,data中包含有初次加载的所有数据
                dg.datagrid('loadData',data);
                //上述方法执行时会被pagerFilter拦截到,并对初始数据进行筛选,以达到分页的效果
            }
        });
        //真正的分页逻辑
        //第一次进入pagerFilter函数时,data中只有rows中保存了数据,并无originalRows属性,实现客户端分页时,需要在一开始将这些数据保存在
        //originalRows中,成为后续分页的基础数据,所以只要originalRows属性存在且不为空,分页时的基础数据便一直是originalRows中保存的数据
        if(!data.originalRows){
            data.originalRows =(data.rows);
        }
        //取出选择新的页面时,新页面的参数,前面已经保存在opts对象中了
        var start =(opts.pageNumber-1)*parseInt(opts.pageSize);
        var end = start + parseInt(opts.pageSize);
        //下面对初始数据进行筛选,并将结果放在data.rows中,页面每次加载时只会显示data.rows中的数据
        data.rows =(data.originalRows.slice(start, end));
        //返回data,完成分页
        return data;
    }

你可能感兴趣的:(easyui)