解析如何使用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();"/> 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.

（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}  
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.
36.
37.
38.
39.
40.
41.
42.
43.
44.
45.
46.
47.
48.

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} 
1.
2.
3.
4.
5.
6.
7.
8.
9.
10.
11.
12.
13.
14.
15.
16.
17.
18.
19.
20.
21.
22.
23.
24.
25.
26.
27.
28.
29.
30.
31.
32.
33.
34.
35.

代码下载
/Files/badwps/FlexPagingBar.rar

【编辑推荐】