jqueryeasyui分页的使用方法.PDF

jquery easyui 分页的使用方法 　　在web开发中，经常会遇到分页的需求，如果靠我们手写代码，可能代码又多 ，样式又不好看，下面介绍一下jQuery easyUI 分页功能，非常的方便简单 　　然后按照《jQuery EasyUI框架使用文档》包含必要文件后，只要在$(function(){ }); 里插入下面的代码即可： 　　$(#pp).pagination(options); 　　下面来介绍Pagination的具体用法，首先来看属性： 　　属性名 类型 描述 默认值 　　total 数字 当分页建立时设置记录的总数量 1 　　pageSize 数字 每一页显示的数量 10 　　pageNumber 数字 当分页建立时，显示的页数 1 　　pageList 数组 用户可以修改每一页的大小， 　　pageList属性定义了多少种大小可以改变. [10,20,30,50] 　　loading 布尔 定义数据是否正在加载 false 　　buttons 数组 定义自定义按钮，每个按钮包含两个属性： 　　iconCls : 显示背景图像的CSS类 　　handler : 当一个按钮被点击时的处理函数 null 　　showPageList 布尔 定义是否显示页面列表 true 　　showRefresh 布尔 定义是否显示刷新按钮 true 　　beforePageText 字符串 在输入框组件前显示的标签 Page 　　afterPageText 字符串 在输入框组件后显示的标签 of {pages} 　　displayMsg 字符串 显示一个页面的信息。 　　Displaying {from} to {to} of {total} items 事件事件名 参数 描述 onSelectPage pageNumber, pageSize 当用户选择一个新页时触发，回调函数包含两个参数： pageNumber : 新页面的页数 pageSize : 新页面的大小 onBeforeRefresh pageNumber, pageSize 刷新按钮被点击之前触发，如果返回false则取消刷新操作 onRefresh pageNumber, pageSize 刷新以后触发 onChangePageSize pageSize 当改变页面大小时触发演示 　　1.数据的提取和显示。 　　DataGrid是通过url属性获取数据的。例如:url:ListInfo.action,这样通过调用Action 中的方法获取数据。返回的是JSON字串。注意，JSON字串必须按照DataGrid 定义的数据格式进行拼装。这种数据格式，可以参考我前面的文章中的附件。特别强调的是，JSON 字串中的total域的值是数据的条数，用于数据的分页。 　　2.数据的分页。 　　数据的分页分为前台分页和后台分页，前台分页，DataGrid已经封装好了。DataGrid定义了两个参数: rows (每页的条数)，page (当前的页数)，这两个参数分别对应属性pageSize，pageNumber。用户可以在 pageSize，pageNumber属性中设置，也可以不设置，这样就取默认值。我们只需在Action 中定义两个变量， private int rows; private int page ; 接着通过SQL语句获取需要取的值。分页的SQL语句(Oracle)如下: 　　这样提取的数据的条数赋值给total域，拼装在JSON字串中返回，就可以实现分页了。当然， pagination:true,是当然需要的。 　　3.数据的操作。 　　数据的操作大致可分为：查看，删除。对于查看，我们可以通过onClickRow或onDblClickRow 事件实现。如： 　　$(function(){ 　　$(#test).datagrid({ 　　title :数据列表, 　　width:900, 　　height:500, 　　(省略的属性) 　　onDblClickRow: function() { 　　var selected = $(#test).datagrid(getSelected); 　　if (selected){ 　　window.open(DataView.action?Id=+selected.ID); 　　}} 　　这样双击就可以查看了。 　　关于删除，可以通过点击删除按钮，调用删除方法来实现。删除按钮可以在拼装JSON 字串的时候，赋值给OPERATION域，这样设