解析如何使用Flex開發(fā)DataGrid分頁控件

作者：admin 2010-08-06 14:13:31

本文向大家簡單介紹一下使用Flex開發(fā)DataGrid分頁控件，開發(fā)Flex的DataGrid分頁控件分頁（paging）控件，支持客戶端、服務(wù)端兩種分頁形式。

在學(xué)習(xí)Flex的過程中你可能會遇到使用Flex開發(fā)DataGrid分頁控件方面的問題，這里和大家分享一下，開發(fā)Flex的DataGrid分頁控件分頁（paging）控件，支持客戶端、服務(wù)端兩種分頁形式。

使用Flex開發(fā)DataGrid分頁控件

下面教程開發(fā)Flex的DataGrid分頁控件分頁（paging）控件，支持客戶端、服務(wù)端兩種分頁形式；這里著重分享一下思路，雖然是用Flex做的，但只要掌握了思路，用別的編程語言也能達(dá)到同樣的效果。

DataGrid分頁控件分頁效果圖

設(shè)計思路：

1，客戶端、服務(wù)端

　　（1）客戶端分頁：將數(shù)據(jù)一次性取到客戶端，客戶要看哪一頁的數(shù)據(jù)，顯示哪一頁的數(shù)據(jù)。
　　（2）服務(wù)端分頁：客戶要看哪一頁的數(shù)據(jù)，向服務(wù)端請求哪一頁的數(shù)據(jù)，客戶端將請求到的數(shù)據(jù)顯示給用戶（可以在客戶端、服務(wù)端分別做緩存，加快數(shù)據(jù)的讀取），由于Flex本身不具有數(shù)據(jù)庫訪問能力，可以考慮通過WebServices向服務(wù)器傳遞數(shù)據(jù)，數(shù)據(jù)的表示形式可以是XML、JSON（本文采用XML的形式）

2，分頁表示層的設(shè)計

　　（1）頁碼條中4個按鈕；這四個按鈕分別為轉(zhuǎn)到第一頁，前一頁，后一頁，最后一頁；當(dāng)這四個按鈕中的任意一點被點擊時，頁碼要重繪，當(dāng)前頁碼變化；且還要考慮當(dāng)頁碼中有第一頁時，前兩個按鈕要隱藏起來；當(dāng)頁碼中有最后一頁時，后兩個按鈕要隱藏起來。
　　（2）頁碼條中頁碼；當(dāng)點擊頁碼條中的頁碼時，DataGrid分頁控件中更新顯示數(shù)據(jù)即可，當(dāng)前頁碼變化。
　　（3）顯示總頁數(shù)，總記錄數(shù)；
　　（4）每頁記錄數(shù)，讓用戶通過下拉框選擇；當(dāng)用戶選擇新的每頁顯示記錄數(shù)時，頁碼要重繪，總頁數(shù)發(fā)生變化，當(dāng)前頁碼變化。
　　（5）頁碼輸入框，讓用戶輸入任意頁碼（要檢查輸入數(shù)據(jù)是否合法），DataGrid分頁控件顯示頁碼中的數(shù)據(jù)，頁碼要重繪，總頁數(shù)變化。
　　（6）查看所有；分頁中的特殊情況，將每頁記數(shù)置為記錄總數(shù)即可達(dá)到要求！頁碼要重繪，總頁數(shù)發(fā)生變化，當(dāng)前頁碼變化

下面貼出代碼實現(xiàn)：

代碼說明

（1）分頁功能條，做一個自定義組件，布局如下：

Code[http://www.xueit.com]

1<mx:HBoxpaddingTopmx:HBoxpaddingTop="8"> 
2<mx:Buttonidmx:Buttonid="firstNavBtn"icon="{firstIcon}"width="10"height="10"click="navigateButtonClick('firstPage');"/> 
3<mx:Buttonidmx:Buttonid="preNavBtn"icon="{preIcon}"width="7"height="10"click="navigateButtonClick('prePage');"/> 
4</mx:HBox> 
5<mx:LinkBaridmx:LinkBarid="pageNav"itemClick="navigatePage(event)"dataProvider="{nav}"/> 
6<mx:HBoxpaddingTopmx:HBoxpaddingTop="8"> 
7<mx:Buttonidmx:Buttonid="nextNavBtn"icon="{nextIcon}"width="7"height="10"click="navigateButtonClick('nextPage');"/> 
8<mx:Buttonidmx:Buttonid="lastNavBtn"icon="{lastIcon}"width="10"height="10"click="navigateButtonClick('lastPage');"/> 
9</mx:HBox> 
10<mx:VRuleheightmx:VRuleheight="25"/> 
11<mx:LabelpaddingTopmx:LabelpaddingTop="3"id="totalPagesLabel"text=""/> 
12<mx:LabelpaddingTopmx:LabelpaddingTop="3"id="totalRecordLabel"text=""/> 
13<mx:LabelpaddingTopmx:LabelpaddingTop="3"text="每頁記錄:"/> 
14<mx:ComboBoxidmx:ComboBoxid="pageSizeComobox"cornerRadius="0"paddingLeft="0"fontWeight="normal"  
width="50"arrowButtonWidth="10"change="pageSizeSelectChange()"/> 
15<mx:LabelpaddingTopmx:LabelpaddingTop="3"text="頁碼:"/> 
16<mx:TextInputidmx:TextInputid="pageNumber"width="40"keyDown="pageIndexInsertChange(event);"/> 
17<mx:LinkButtonidmx:LinkButtonid="viewAllLinkBtn"label="查看所有"click="viewAll();"/>

（2）頁碼條繪制方法，傳參數(shù)為頁碼中的第一個頁碼

Code[http://www.xueit.com]

1/**  
2*構(gòu)建頁碼條  
3*pages:總頁數(shù)  
4*pageIndex:當(dāng)前頁（注意，從0開始）  
5*  
6*/  
7privatefunctioncreateNavBar(pageIndex:uint=0):void{  
8nav.removeAll();  
9//向前圖標(biāo)操作,first,Pre  
10if(pageIndex>1){  
11firstPage=0;  
12firstNavBtn.visible=true;  
13//  
14varintLFive:int=pageIndex-navSize;//calculatestartoflast5;  
15//  
16prePage=intLFive;  
17preNavBtn.visible=true;  
18}  
19else{  
20firstNavBtn.visible=false;  
21preNavBtn.visible=false;  
22}  
23//頁碼條  
24for(varx:uint=0;x<navSize;x){  
25varpg:uint=xpageIndex;26nav.addItem({label:pg1,data:pg});  
27//28varpgg:uint=pg1;  
29if(pgg>=totalPages){//搜索到最后一個頁碼，停止添加到navbar  
30x=navSize;  
31}32}33//計算最后一組頁碼條中第一個頁碼的頁碼編號  
34varlastpage:Number=0;  
35for(vary:uint=navSize;y<=totalPages-1;y=ynavSize){
//letscalculatethelastpagebutton  
36if(y5>navSize){  
37lastpage=y;  
38}  
39}  
40//向后圖標(biāo)  
41if(pg<totalPages-1){  
42nextPage=pg1;  
43nextNavBtn.visible=true;  
44lastPage=lastpage;  
45lastNavBtn.visible=true;  
46}  
47else{  
48nextNavBtn.visible=false;  
49lastNavBtn.visible=false;  
50}  
51}

3、分頁觸發(fā)的方法，組件中有一個屬性為pagingFunction，為向服務(wù)端請求數(shù)據(jù)的函數(shù)；當(dāng)該函數(shù)為空時，調(diào)用客戶端分頁；反之調(diào)用該方法進(jìn)行服務(wù)端分頁。

Code[http://www.xueit.com]

1/**  
2*更新數(shù)據(jù)源,更新表格顯示數(shù)據(jù)  
3*/  
4privatefunctionrefreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,
pageSize:uint=0,resultReturn:Boolean=false):void{  
5//分頁函數(shù)  
6if(DataGrid分頁控件==null)return;  
7currentPageIndex=pageIndex;  
8if(pageSize==0){  
9pageSize=this.pageSize;10}else{  
11this.pageSize=pageSize;  
12if(!resultReturn)totalPages=Math.ceil(orgData.length/pageSize);  
13}  
14if(!resultReturn){  
15if(this.pagingFunction!=null){  
16pagingFunction(pageIndex,pageSize);  
17this.isCreateNavBar=isCreateNavBar;  
18}  
19else{  
20viewData=newArrayCollection(orgData.source.slice((pageIndex*pageSize),(pageIndex*pageSize)pageSize));  
21DataGrid分頁控件.dataProvider=viewData;  
22pageNumber.text=(pageIndex1).toString();  
23  
24totalRecordLabel.text='總記錄數(shù)：'orgData.length.toString();  
25}  
26}  
27else{  
28DataGrid分頁控件.dataProvider=orgData;  
29totalPages=Math.ceil(totalRecord/pageSize);  
30pageNumber.text=(pageIndex1).toString();  
31totalRecordLabel.text='總記錄數(shù)：'totalRecord.toString()  
32}  
33totalPagesLabel.text='總頁數(shù)：'totalPages;  
34if(isCreateNavBar)createNavBar(pageIndex);  
35}

代碼下載
/Files/badwps/FlexPagingBar.rar

【編輯推薦】

學(xué)習(xí)筆記在Flex中如何使用CSS文件
FlexBuilder4十大新特性閃亮登場
Flex框架中Cairngorm和Mate的優(yōu)點大比拼
FlexBuilder3.0與Eclipse3.4的完美結(jié)合
解析Flex應(yīng)用開發(fā)步驟新特性和技術(shù)框架

責(zé)任編輯：佚名來源： cnblogs.com

Flex DataGrid分頁控件