天天看點
傳回

EasyUI基礎入門之Pagination(分頁)

前言

        對于一些企業級的應用來說(非網站),頁面上最為主要的内容也就是表格和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

使用者能夠靈活的改變每頁顯示的記錄數。可選

項存在數組中示例如下:

$.('#pager').pagination(
{
    pageList:[10,20,30]
});
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="

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:按鈕指間的分隔符

first:第一個按鈕

prev:前一個按鈕

next:後一個按鈕

last:最後一個按鈕

refresh:重新整理按鈕

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 定義是否顯示重新整理按鈕。 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

【JQuery EasyUI】 easyui Pagination
上一篇: 需求分析 - linFen
下一篇: 基于oracle的分頁功能(jdbc實作)

繼續閱讀