解析如何使用Flex开发DataGrid分页控件

开发 后端
本文向大家简单介绍一下使用Flex开发DataGrid分页控件,开发Flex的DataGrid分页控件分页(paging)控件,支持客户端、服务端两种分页形式。

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

 (2)页码条绘制方法,传参数为页码中的第一个页码

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

  1. 1/**  
  2. 2*构建页码条  
  3. 3*pages:总页数  
  4. 4*pageIndex:当前页(注意,从0开始)  
  5. 5*  
  6. 6*/  
  7. 7privatefunctioncreateNavBar(pageIndex:uint=0):void{  
  8. 8nav.removeAll();  
  9. 9//向前图标操作,first,Pre  
  10. 10if(pageIndex>1){  
  11. 11firstPage=0;  
  12. 12firstNavBtn.visible=true;  
  13. 13//  
  14. 14varintLFive:int=pageIndex-navSize;//calculatestartoflast5;  
  15. 15//  
  16. 16prePage=intLFive;  
  17. 17preNavBtn.visible=true;  
  18. 18}  
  19. 19else{  
  20. 20firstNavBtn.visible=false;  
  21. 21preNavBtn.visible=false;  
  22. 22}  
  23. 23//页码条  
  24. 24for(varx:uint=0;x<navSize;x){  
  25. 25varpg:uint=xpageIndex;26nav.addItem({label:pg1,data:pg});  
  26. 27//28varpgg:uint=pg1;  
  27. 29if(pgg>=totalPages){//搜索到最后一个页码,停止添加到navbar  
  28. 30x=navSize;  
  29. 31}32}33//计算最后一组页码条中第一个页码的页码编号  
  30. 34varlastpage:Number=0;  
  31. 35for(vary:uint=navSize;y<=totalPages-1;y=ynavSize){
  32. //letscalculatethelastpagebutton  
  33. 36if(y5>navSize){  
  34. 37lastpage=y;  
  35. 38}  
  36. 39}  
  37. 40//向后图标  
  38. 41if(pg<totalPages-1){  
  39. 42nextPage=pg1;  
  40. 43nextNavBtn.visible=true;  
  41. 44lastPage=lastpage;  
  42. 45lastNavBtn.visible=true;  
  43. 46}  
  44. 47else{  
  45. 48nextNavBtn.visible=false;  
  46. 49lastNavBtn.visible=false;  
  47. 50}  
  48. 51}  

 3、分页触发的方法,组件中有一个属性为pagingFunction,为向服务端请求数据的函数;当该函数为空时,调用客户端分页;反之调用该方法进行服务端分页。

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

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

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

【编辑推荐】

  1. 学习笔记 在Flex中如何使用CSS文件
  2. FlexBuilder4十大新特性闪亮登场
  3. Flex框架中Cairngorm和Mate的优点大比拼
  4. FlexBuilder3.0与Eclipse3.4的完美结合
  5. 解析Flex应用开发步骤 新特性和技术框架 

 

责任编辑:佚名 来源: cnblogs.com
相关推荐

2010-07-28 09:29:36

Flex DataGr

2010-08-11 16:10:27

Flex DataGr

2009-08-21 15:27:11

C# DataGrid

2009-08-07 09:20:26

DataPager数据

2010-08-11 16:30:49

Flex DataGr

2010-08-11 13:28:46

Flex行为

2010-07-30 13:52:17

Flex组件

2010-08-12 13:59:37

FlexList控件

2009-08-11 14:45:41

C# DataGrid

2010-08-06 15:11:44

Flex界面控件

2010-08-03 14:24:37

Flex与java集成

2010-07-30 16:17:18

Flex开发

2010-07-27 13:53:15

Flex ComboB

2010-08-09 15:52:28

2010-08-05 13:14:16

Flex布局

2010-07-30 09:56:02

Flex控件

2010-08-04 15:12:54

Flex开发

2009-08-25 15:30:55

DataGrid We

2010-08-11 16:03:02

Flex DataGr

2010-08-11 15:11:52

Flex组合框
点赞
收藏

51CTO技术栈公众号