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

 （2）页码条绘制方法，传参数为页码中的第一个页码

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

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

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

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

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

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

名称栏目：解析如何使用Flex开发DataGrid分页控件
网站URL：http://www.shufengxianlan.com/qtweb/news12/468412.html

网站建设、网络推广公司-创新互联，是专注品牌与效果的网站制作，网络营销seo公司；服务项目有等

广告

声明：本网站发布的内容（图片、视频和文字）以用户投稿、用户转载内容为主，如果涉及侵权请尽快告知，我们将会在第一时间删除。文章观点不代表本网站立场，如需处理请联系客服。电话：028-86922220；邮箱：631063699@qq.com。内容未经允许不得转载，或转载时需注明来源： 创新互联

猜你还喜欢下面的内容

企业建站知识

各行业网站

域名申请　　 　网站建设　　 　成都定制网站建设　　 　成都定制网页设计　　 　崇州网站建设　　 　西部信息机房　　 　成都响应式网站建设公司　　 　柔性防护网　　 　成都做手机网站　　 　丹棱网站建设　　 　整合营销　　 　光华服务器托管　　 　名片设计　　 　seo优化排名　　 　成都网站排名　　 　网站收录　　 　成都网站建设　　 　广告品牌策划设计　　 　高端网站设计　　 　成都ssl证书认证