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