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==null) return;
 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                   }