扩展easyui数据表格datagrid,静态数据自动分页

最新推荐文章于 2024-03-18 21:27:04 发布

原创最新推荐文章于 2024-03-18 21:27:04 发布 · 710 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#easyui #前端控件扩展

这篇博客介绍了如何扩展EasyUI的面板pagination和datagrid以实现静态数据的自动分页，避免频繁请求后端。通过`initPnData`和`autoPnData`方法，可以在初始化和翻页时直接从静态数据中加载分页内容。

这次的扩展可以优化数据表格在某些应用场景下的性能。比如不方便请求后端，或不方便频繁请求后端的场景。


扩展代码如下：
/*
 扩展easyui面板pagination,分页汉化
 */
$.extend($.fn.pagination.defaults, {
    beforePageText: '第',
    afterPageText: '页    共 {pages} 页',
    displayMsg: '当前显示 {from} - {to} 条记录   共 {total} 条记录'
});

/*
 扩展easyui面板datagrid,静态数据自动分页。初始化静态数据，翻页、刷新也从静态数据里取
 使用案例：
 _this.view.datagrid("initPnData",listData);//参数1：方法名，参数2：列表数据
 _this.view.datagrid("autoPnData");//参数：方法名
 */
$.extend($.fn.datagrid.methods, {
    initPnData: function (jq, pnData) {
        if (pnData) {
            jq.datagrid("getPager").data("pnData",pnData);
            jq.datagrid("autoPnData");
        }
    },
    autoPnData: function (jq) {
        var p=jq.datagrid("getPager");
        var pnData=p.data("pnData");
        if (pnData) {
            var options = p.pagination("options");
            var pageNumber=options.pageNumber===0?1:options.pageNumber;
            var pageSize=options.pageSize;
            var start=(pageNumber-1)*pageSize;
            var data= pnData.slice(start,start+pageSize);
            jq.datagrid("loadData", {
                "total":pnData.length,rows:data }
            );
        }
    }
});

使用方式：

声明数据表格

var gridView=$("#gridID");

var gridColumns=[

[

    {field: 'FileName', title: '文件名称', width: 300},
.......
]
]

gridView.datagrid({
    pagination: true,
    pageSize: 1000,
    pageList: [100,1000,5000],
    rownumbers: true,
    columns: gridColumns
});
gridView.datagrid('getPager').pagination({
    onSelectPage: function (pageNumber, pageSize) {
        gridView.datagrid("autoPnData");//当翻页时，自动分页
    }
});

初始化静态数据

$("#gridID").datagrid("initPnData",listData);

也可以在ajax之后，更新静态数据。