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

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


扩展代码如下:
/*
 扩展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之后,更新静态数据。

 

  • 0
    点赞
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值