随笔- 15  评论- 310  文章- 0 

[原创]Flex中DataGrid分页(客户端、服务端)

  这两天做了一个Flex的DataGrid分页(paging)控件,支持客户端、服务端两种分页形式;这里着重分享一下思路,虽然是用flex做的,但只要掌握了思路,用别的编程语言也能达到同样的效果。

组件运行截图:

 

设计思路:

1,客户端、服务端

  (1)客户端分页:将数据一次性取到客户端,客户要看哪一页的数据,显示哪一页的数据。

  (2)服务端分页:客户要看哪一页的数据,向服务端请求哪一页的数据,客户端将请求到的数据显示给用户(可以在客户端、服务端分别做缓存,加快数据的读取),由于flex本身不具有数据库访问能力,可以考虑通过WebServices向服务器传递数据,数据的表示形式可以是XML、JSON(本文采用XML的形式)

 

2,分页表示层的设计

  (1)页码条中4个按钮;这四个按钮分别为转到第一页,前一页,后一页,最后一页;当这四个按钮中的任意一点被点击时,页码要重绘,当前页码变化;且还要考虑当页码中有第一页时,前两个按钮要隐藏起来;当页码中有最后一页时,后两个按钮要隐藏起来。

  (2)页码条中页码;当点击页码条中的页码时,DataGrid中更新显示数据即可,当前页码变化

  (3)显示总页数,总记录数;

  (4)每页记录数,让用户通过下拉框选择;当用户选择新的每页显示记录数时,页码要重绘,总页数发生变化,当前页码变化。

  (5)页码输入框,让用户输入任意页码(要检查输入数据是否合法),DataGrid显示页码中的数据,页码要重绘,总页数变化。

  (6)查看所有;分页中的特殊情况,将每页记数置为记录总数即可达到要求!页码要重绘,总页数发生变化,当前页码变化

 

代码说明

(1)分页功能条,做一个自定义组件,布局如下:

代码
 1     <mx:HBox paddingTop="8">
 2         <mx:Button id="firstNavBtn" icon="{firstIcon}" width="10" height="10" click="navigateButtonClick('firstPage');" />
 3         <mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="navigateButtonClick('prePage');"/>
 4     </mx:HBox>
 5     <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}"/>
 6     <mx:HBox paddingTop="8">
 7         <mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="navigateButtonClick('nextPage');"/>
 8         <mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="navigateButtonClick('lastPage');"/>
 9     </mx:HBox>
10     <mx:VRule height="25"/>
11     <mx:Label paddingTop="3" id="totalPagesLabel" text=""/>
12     <mx:Label paddingTop="3" id="totalRecordLabel" text=""/>
13     <mx:Label paddingTop="3" text="每页记录:"/>
14     <mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/>
15     <mx:Label paddingTop="3" text="页码:"/>
16     <mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/>
17     <mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>

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

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

 

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

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

 

代码下载

/Files/badwps/FlexPagingBar.rar

posted on 2009-12-18 00:18 小山982 阅读(...) 评论(...) 编辑 收藏