EasyUI 分页简洁代码

最新推荐文章于 2019-03-21 06:00:08 发布

weixin_30512089

最新推荐文章于 2019-03-21 06:00:08 发布

阅读量85

点赞数

CC 4.0 BY-SA版权

文章标签： javascript json ViewUI

原文链接：http://www.cnblogs.com/solocao/p/3663837.html

本文介绍了一种使用EasyUI实现简单高效分页功能的方法。通过一个具体的代码示例，展示了如何配置分页参数、设置每页显示记录数及实现自适应等功能。

做分页代码，看到网上很多人实现的方法，那是各种调用，各种获取对象。我很不解，因为Easyui已经给我们了分页的具体实现，为什么有些人要画蛇添足呢。

其实真正的分页，在你的代码中，别人可能都没有注意到，只是后台你只要能正确返回总记录条数和数据内容就行了。

下面是分页功能的代码：

function SBDiv_1_DateGrid() {
$('#SBDiv_1_DateGrid').datagrid({/// <reference path="../../Json/agreement.aspx" />
//在我没有办法灵活向后台传递参数的情况下，用ajax
url: "/Handler/ManageWSE.asmx/SBDiv_1_DataGrid",
pageSize: 10, //每页显示的记录条数，默认为10
pageList: [10, 15, 20, 25], //可以设置每页记录条数的列表
queryParams:{strwhere:"122"},
pagination: true,
fit: true, //自适应
rownumbers: true,
fitColumns: true,
striped: true,
sortOrder: 'desc',
remoteSort: true,
idField: 'id', //删除会删掉所选的几个，不管分页
// toolbar: '#toolbar',
columns: [[{ field: 'ckr', checkbox: true },
{ title: '交易编号', field: 'TradeNo', width: 65, sortable: true },
{ title: '交易日期', field: 'dcTradeDate', width: 135},
{ title: '枪号', field: 'GunNo', width: 80, sortable: true },
{ title: '加气类型', field: 'DataSourceType', formatter: function (value, row, index) { if (value == 1) return "LNG"; else return "CNG"; }, width: 150, sortable: true },
{ title: '加气量', field: 'TradeVolume', width: 100, sortable: true },
{ title: '加气单价', field: 'Price', width: 65, sortable: true },
{ title: '协议单价', field: 'ProtocolPrice', width: 65, editor: { type: 'text' }, sortable: true },

{ title: '加气金额', field: 'TradeSum', width: 80, sortable: true },
{ title: '协议金额', field: 'ProtocolTradeSum', width: 80, sortable: true },
{ title: '加气卡号', field: 'UsercardNo', width: 150, sortable: true }
]]
});

}

你看，也没有多复杂，其实已经实现了分页功能了。

转载于:https://www.cnblogs.com/solocao/p/3663837.html