解析如何使用Flex開發DataGrid分頁控件
在學習Flex的過程中你可能會遇到使用Flex開發DataGrid分頁控件方面的問題，這里和大家分享一下，開發Flex的DataGrid分頁控件分頁（paging）控件，支持客戶端、服務端兩種分頁形式。
使用Flex開發DataGrid分頁控件
下面教程開發Flex的DataGrid分頁控件分頁（paging）控件，支持客戶端、服務端兩種分頁形式；這里著重分享一下思路，雖然是用Flex做的，但只要掌握了思路，用別的編程語言也能達到同樣的效果。
DataGrid分頁控件分頁效果圖
設計思路：
1，客戶端、服務端
（1）客戶端分頁：將數據一次性取到客戶端，客戶要看哪一頁的數據，顯示哪一頁的數據。
（2）服務端分頁：客戶要看哪一頁的數據，向服務端請求哪一頁的數據，客戶端將請求到的數據顯示給用戶（可以在客戶端、服務端分別做緩存，加快數據的讀取），由于Flex本身不具有數據庫訪問能力，可以考慮通過WebServices向服務器傳遞數據，數據的表示形式可以是XML、JSON（本文采用XML的形式）
2，分頁表示層的設計
（1）頁碼條中4個按鈕；這四個按鈕分別為轉到第一頁，前一頁，后一頁，最后一頁；當這四個按鈕中的任意一點被點擊時，頁碼要重繪，當前頁碼變化；且還要考慮當頁碼中有第一頁時，前兩個按鈕要隱藏起來；當頁碼中有最后一頁時，后兩個按鈕要隱藏起來。
（2）頁碼條中頁碼；當點擊頁碼條中的頁碼時，DataGrid分頁控件中更新顯示數據即可，當前頁碼變化。
（3）顯示總頁數，總記錄數；
（4）每頁記錄數，讓用戶通過下拉框選擇；當用戶選擇新的每頁顯示記錄數時，頁碼要重繪，總頁數發生變化，當前頁碼變化。
（5）頁碼輸入框，讓用戶輸入任意頁碼（要檢查輸入數據是否合法），DataGrid分頁控件顯示頁碼中的數據，頁碼要重繪，總頁數變化。
（6）查看所有；分頁中的特殊情況，將每頁記數置為記錄總數即可達到要求！頁碼要重繪，總頁數發生變化，當前頁碼變化
下面貼出代碼實現：
代碼說明
（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）頁碼條繪制方法，傳參數為頁碼中的第一個頁碼
Code[http://www.xueit.com]
- 1/**
- 2*構建頁碼條
- 3*pages:總頁數
- 4*pageIndex:當前頁（注意，從0開始）
- 5*
- 6*/
- 7privatefunctioncreateNavBar(pageIndex:uint=0):void{
- 8nav.removeAll();
- 9//向前圖標操作,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//向后圖標
- 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、分頁觸發的方法，組件中有一個屬性為pagingFunction，為向服務端請求數據的函數；當該函數為空時，調用客戶端分頁；反之調用該方法進行服務端分頁。
Code[http://www.xueit.com]
- 1/**
- 2*更新數據源,更新表格顯示數據
- 3*/
- 4privatefunctionrefreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,
- pageSize:uint=0,resultReturn:Boolean=false):void{
- 5//分頁函數
- 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='總記錄數：'orgData.length.toString();
- 25}
- 26}
- 27else{
- 28DataGrid分頁控件.dataProvider=orgData;
- 29totalPages=Math.ceil(totalRecord/pageSize);
- 30pageNumber.text=(pageIndex1).toString();
- 31totalRecordLabel.text='總記錄數：'totalRecord.toString()
- 32}
- 33totalPagesLabel.text='總頁數：'totalPages;
- 34if(isCreateNavBar)createNavBar(pageIndex);
- 35}
代碼下載
/Files/badwps/FlexPagingBar.rar
【編輯推薦】
- 學習筆記 在Flex中如何使用CSS文件
- FlexBuilder4十大新特性閃亮登場
- Flex框架中Cairngorm和Mate的優點大比拼
- FlexBuilder3.0與Eclipse3.4的完美結合
- 解析Flex應用開發步驟 新特性和技術框架
