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