解析如何使用Flex開發(fā)DataGrid分頁控件
在學(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ù)框架
