EasyUI基础入门之Pagination(分页)

前言

        对于一些企业级的应用来说(非站点),页面上最为基本的内容也就是表格和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事件,当按钮被点击时触发。開始于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标记创建

 <a id="btn" href="#" class="easyui-linkbutton" data-options="iconCls:'icon-search'">easyui</a>

       2、通过js脚本创建 
<a id="btn" href="#">easyui</a>
$('#btn').linkbutton({ iconCls: 'icon-search' });
        以上两种方式都能够创建linkbutton。以下看简单的样例,对于主要的链接跳转这里就不多题了。

        下面样例使用JQuery绑定单击处理函数给链接;

<body>
	<a id="btn" href="www.baidu.com" 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同意用户导航数据页面。支持可配置选项页面当行和页面长度的选择。并且用户能够加入�自己定义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')}
}]">
</div>

  2、使用js脚本创建:

<div class="easyui-pagination" style="border:1px solid #ccc" id="pager">
</div>
<script>
 $('#pager').pagination({
    total: 11,
    buttons: [{
iconCls: 'icon-add',
handler: function () {
alert('add')
}
   }, '-', {
iconCls: 'icon-save',
handler: function () {
alert('save')
}
}]
    });
</script>

 null
layout array

定义pagination的布局,開始于版本号    1.3.5

布局选项可能包括例如以下的值:

list:页面大小集合

sep:button指间的分隔符

first:第一个button

prev:前一个button

next:后一个button

last:最后一个button

refresh:刷新button

manual:手动页数的输入,同意进入的页码

links:页面数字的链接.

简单演示样例代码:

<script>
$('#pager').pagination({
total: 11,
buttons: [{
iconCls: 'icon-add',
handler: function () {
alert('add')
}
   }, '-', {
iconCls: 'icon-save',
handler: function () {
alert('save')
}
   }],
layout:['list','sep',first','links','last']
}); 
</script>

  
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、创建分页标记:

<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


posted @ 2014-06-18 21:11  hrhguanli  阅读(4289)  评论(0)  编辑  收藏  举报