前言
对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和form了。
对于相似于ERP这类系统来说数据记录比較大,前端表格展示的时候必需得实现分页功能了。恰巧EasyUI就提供了分页组件Pagination
pagination覆盖默认$.fn.pagination.defaults.Pagination分页同意用户通过分页的方式来浏览数据。它支持可配置的选项,页面导航和页面长度的选择,并且用户能够加入分页的右边定制button来增强分页功能。
只是pagination是依赖于linkbutton的,因此这里有必要了解下linkbutton。
linkbutton
使用$.fn.linkbutton.defaults重载默认值。
链接button用户创建超链接button。
它是表示正常的<a>标记。能够显示图标和文字,或仅仅仅仅是图标或文字。button的宽度能够动态收缩/展开,以适应文本标签。
依照惯例接下来看看其属性、事件、方法。
属性
| 名称 | 类型 | 描写叙述信息 | 默认值 |
| id | string | 该组件的唯一标示ID | null |
| disabled | boolean | 当设置为true时标示禁用该button | false |
| toggle | boolean | 设置为true时,用户能够改变button的状态为选择或取消选择,自版本号1.3.3開始 | false |
| selected | boolean | 表明该button的状态是否为选择,自1.3.3開始 | false |
| group | string | 表明哪些button在同一个组中,開始于1.3.3 | null |
| plain | boolean | 设置为true时会显示间接效果 | false |
| text | string | button上的文字 | null |
| iconCls | string | 在左边显示一个16*16大小图标的css类 | '' |
| iconAlign | string | button上图标显示的位置,可选值为left、right、top、bottom開始于1.3.2 | left |
| size | string | button的大小,可选值为small、large開始于1.3.6 | small |
事件
linkbutton提供了一个onclik事件,当button被点击时触发。開始于1.3.6
方法
| 名称 | 參数 | 描写叙述信息 |
| options | none | 返回属性对象 |
| disable | none | 禁用按钮 实例: $('#btn').linkbutton('disable') |
| enable | none | 启用button,用法相似上面 |
| select | none | 选择该button開始于1.3.6 |
| unselect | none | 取消选择,開始于1.3.6 |
使用方式
linkbutton相同提供两种使用方式。
1、通过html标记创建
easyui2、通过js脚本创建
easyui$('#btn').linkbutton({ iconCls: 'icon-search' });以上两种方式都能够创建linkbutton。以下看简单的样例,对于基本的链接跳转这里就不多题了。
以下样例使用JQuery绑定单击处理函数给链接;
easyui好了,关于linkbutton大概也就这么多,我们能够简单的觉得其和普通的<a>标签没啥差别,仅仅是统一了easyui的样式。
Pagination
对于linkbutton有了一定的了解之后就能够着手学习pagination了,值域pagination为何会依赖于linkbutton,我想主要原因还是pagination提供分页右边button的定制化(那些个button就是linkbutton啦)。闲话不多说,相同从官网api開始走起。
使用$.fn.pagination.defaults重载默认值。
pagination同意用户导航数据页面。支持可配置选项页面当行和页面长度的选择。并且用户能够加入自己定义button在正确的分页,增强功能。
依赖组件:linkbutton
属性
分页插件具有的属性还是比較的多的,详细有例如以下一些属性:
| 名称 | 类型 | 描写叙述信息 | 默认值 |
| total | number | 总记录数,该属性在创建分页的时候是必须设置的 | 1 |
| pageSize | number | 每页显示的记录数 | 10 |
| pageNumber | number | 当分页创建完成时显示当前的页码 | 1 |
| pageList | array | 用户能够灵活的改变每页显示的记录数。可选 项存在数组中示比例如以下: $.('#pager').pagination({ pageList:[10,20,30]}); | |
| loading | boolean | 定义数据是否正在加载(提醒) | false |
| buttons | array,selector | 自己定义button,两个值。 1、一个array数组,每一个button包括两个属性 iconCls:显示背景图片的css类 handler:当button被点击时调用的一个句柄函数 2、selector指示该buttons 一个简单的样例: 1、使用html标记来创建: <div class="easyui-pagination" style="border:1px solid #ccc" data-options=" total: 114, buttons: [{ iconCls:'icon-add', handler:function(){alert('add')} },'-',{ iconCls:'icon-save', handler:function(){alert('save')}}]"> 2、使用js脚本创建: | null |
| layout | array | 定义pagination的布局,開始于版本号 1.3.5 布局选项可能包括例如以下的值: list:页面大小集合 sep:button指间的分隔符 first:第一个button prev:前一个button next:后一个button last:最后一个button refresh:刷新button manual:手动页数的输入,同意进入的页码 links:页面数字的链接. 简单演示样例代码: | |
| links | number | 链接的数量,当links被定义在layout属性中的时候该设置才有效。 開始于1.3.5 | 10 |
| showPageList | boolean | 定义是否显示可选择的每页记录数。 | true |
| showRefresh | boolean | 定义是否显示刷新button。 | true |
| beforePageText | string | 在输入框之间显示的符号 | Page |
| afterPageText | string | 在输入框之后显示的符号 | of{pages} |
| dispalyMsg | string | 在插件右上方显分页信息 | Displaying {from} to {to} of {total} items |
是吧,pagination属性挺多、挺繁琐的呢。只是不必在意正是由于这样我们才干灵活的对事实上现定制化。
须要说明的是最后3个属性通常是不会动的。local里面的语言js就已经定义好了。
事件
| 名称 | 属性 | 描写叙述信息 |
| onSelectPage | pageNumber,pageSize | 当用户进行翻页的时候触发,回调函数包括2个參数: pageNumber:下一页页码 pageSize:下一页显示记录数 演示样例: $('#pp').pagination({onSelectPage:function(pageNumber, pageSize){$(this).pagination('loading');alert('pageNumber:'+pageNumber+',pageSize:'+pageSize);$(this).pagination('loaded');}}); |
| onBeforeRefresh | pageNumber,pageSize | 刷新之前触发,返回false将取消刷新。 |
| onRefresh | pageNumber,pageSize | 刷新之后触发。 |
| onChangePageSize | pageSize | 当用户改动每页记录数时触发。 |
方法
| 名称 | 參数 | 描写叙述信息 |
| options | none | 返回分页属性对象 |
| loading | none | 提醒分页插件正在下载 |
| loaded | none | 提醒分页插件已经下载 |
| refresh | options | 刷新并显示信息。1.3可用。 $('#pp').pagination('refresh'); // 刷新页面右栏的信息$('#pp').pagination('refresh',{ // 改变选项并刷新页面右栏的信息 total: 114, pageNumber: 6}); |
| select | page | 选择一个新页面。页面索引从1開始。1.3可用。 $('#pp').pagination('select'); // refresh the current page$('#pp').pagination('select', 2); // select the second page |
使用方式
1、创建分页标记:
2、使用脚本创建:
$('#pp').pagination({ total:2000, pageSize:10 }); Demo
官网提供的pagination演示样例是一些定制,这里我就不再多提了,读者能够依据上面表格中的一些熟悉、方法自己去灵活的定制。这里我觉得比較有意思的demo还是api中的。
通过面板和pagination来使用ajax分页。当用户选择一个新页面,面板将显示指定页面的对应内容。
代码例如以下:
page=1'"> </div> <div class="easyui-pagination" style="border:1px solid #ccc;" data-options=" total: 2000, pageSize: 10, onSelectPage: function(pageNumber, pageSize){ $('#content').panel('refresh', 'show_content.php?
page='+pageNumber);依据选择的pageNumber刷新panel里面的页面内容 }"> </div>
好了,基于pagination的学习先就到这了,兴许用到的地方目測会很的多的呢。
独立站点: