Flex中DataGrid分页（客户端、服务端）

[原创]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                    }

 

代码下载

/Files/badwps/FlexPagingBar.rar