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‘ });
下面樣例使用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>
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:下一頁顯示記錄數 演示樣例: |
| 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、使用腳本創建:<div id="pp" class="easyui-pagination" data-options="total:2000,pageSize:10" style="background:#efefef;border:1px solid #ccc;"> </div>
<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
EasyUI基礎入門之Pagination(分頁)