碼上快樂

相關內容    簡體    繁體

EasyUI基礎入門之Pagination(分頁)

本文轉載自   查看原文   2014-06-18 21:11   3229 

前言

        對於一些企業級的應用來說(非站點),頁面上最為基本的內容也就是表格和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



免責聲明！

本站轉載的文章為個人學習借鑒使用，本站對版權不負任何法律責任。如果侵犯了您的隱私權益，請聯系本站郵箱yoyou2525@163.com刪除。



猜您在找 EasyUI Pagination 分頁的兩種做法 Pagination 分頁 Bootstrap3基礎 pagination 分頁按鈕 簡單示例 easyUI pagination分頁控件點擊下一頁后跳轉到最后一頁 ant pagination分頁 關於分頁Pagination的使用 pagination實現分頁功能 salesforce 零基礎學習（四十九）自定義列表分頁之使用Pagination實現分頁效果 ※※※ jquery.pagination.js分頁 EasyUI基礎入門之Parser(解析器)
 
粵ICP備18138465號   © 2018-2025 CODEPRJ.COM