使用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）分页功能条，做一个自定义组件，布局如下：

<?xml version="1.0" encoding="utf-8"?> <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; import mx.events.ItemClickEvent; import flash.events.KeyboardEvent; import mx.controls.DataGrid; import mx.validators.NumberValidator; [Bindable] [Embed(source='assets/first.jpg')] private var firstIcon:Class; private var firstPage:uint; [Bindable] [Embed(source='assets/pre.jpg')] private var preIcon:Class; private var prePage:uint; [Bindable] [Embed(source='assets/next.jpg')] private var nextIcon:Class; private var nextPage:uint; [Bindable] [Embed(source='assets/last.jpg')] private var lastIcon:Class; private var lastPage:uint; //页码条数据,绑定 [Bindable] private var nav:ArrayCollection = new ArrayCollection(); //默认起始页码,第1页 private var currentPageIndex:uint = 0; //是否已初始化 private var isInit:Boolean=true; //总页数 private var totalPages:uint = 0; //是否重绘页码条，当使用服务端分页时使用 private var isCreateNavBar:Boolean = true; /************************************************************/ //显示到Grid的数据 [Bindable] public var viewData:ArrayCollection=null; //所有的数据 public var orgData:ArrayCollection=null; //每页记录数下拉框 public var pageSizeDropDownListData:ArrayCollection=null; // 每页记录数 public var pageSize:uint = 5; // 页码条上显示页码的个数 public var navSize:uint = 5; //记录总数，调用服务端发页时使用 public var totalRecord:int=0; //分页函数 public var pagingFunction:Function=null; //分页条对应的Grid public var dataGrid:DataGrid=null; /***************************************************************/ public function dataBind(isServerSide:Boolean=false):void{ //是否初始化 if(isInit){ if(pageSizeDropDownListData==null){ pageSizeDropDownListData = new ArrayCollection(); pageSizeDropDownListData.addItem({label:5,data:5}); pageSizeDropDownListData.addItem({label:10,data:10}); pageSizeDropDownListData.addItem({label:20,data:20}); pageSizeDropDownListData.addItem({label:30,data:30}); } pageSizeComobox.dataProvider=pageSizeDropDownListData; isInit=false; } // refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide); } /** * 构建页码条 * pages:总页数 * pageIndex:当前页（注意，从0开始） * */ private function createNavBar(pageIndex:uint = 0):void{ nav.removeAll(); //向前图标操作,first,Pre if( pageIndex > 1 ){ firstPage=0; firstNavBtn.visible=true; // var intLFive:int = pageIndex-navSize; // calculate start of last 5; // prePage=intLFive; preNavBtn.visible=true; } else{ firstNavBtn.visible=false; preNavBtn.visible=false; } //页码条 for( var x:uint = 0; x < navSize; x++){ var pg:uint = x + pageIndex; nav.addItem({label: pg + 1,data: pg}); // var pgg:uint = pg+1; if(pgg>=totalPages){ //搜索到最后一个页码，停止添加到navbar x=navSize; } } //计算最后一组页码条中第一个页码的页码编号 var lastpage:Number = 0; for( var y:uint = navSize; y <= totalPages-1;y = y + navSize ){ //lets calculate the lastpage button if(y+5 > navSize){ lastpage = y; } } //向后图标 if( pg < totalPages - 1 ){ nextPage=pg + 1; nextNavBtn.visible=true; lastPage=lastpage; lastNavBtn.visible=true; } else{ nextNavBtn.visible=false; lastNavBtn.visible=false; } } /** * 页码按钮按下(页码条点击) */ private function navigatePage(event:ItemClickEvent):void { refreshDataProvider(event.item.data,false); } /** * 页码按钮按下,first,pre,next,last */ private function navigateButtonClick(pageString:String):void{ var pageIndex:uint=0; switch(pageString){ case "firstPage": pageIndex=firstPage; break; case "prePage": pageIndex=prePage; break; case "nextPage": pageIndex=nextPage; break; default: //lastPage pageIndex=lastPage; } // refreshDataProvider(pageIndex); } /** * 更新数据源,更新表格显示数据 */ private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void{ //分页函数 if(dataGrid==null) return; currentPageIndex=pageIndex; if(pageSize==0){ pageSize=this.pageSize; }else{ this.pageSize=pageSize; if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize); } if(!resultReturn){ if(this.pagingFunction!=null){ pagingFunction(pageIndex,pageSize); this.isCreateNavBar=isCreateNavBar; } else{ viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) ); dataGrid.dataProvider=viewData; pageNumber.text=(pageIndex+1).toString(); totalRecordLabel.text = '总记录数：' + orgData.length.toString(); } } else{ dataGrid.dataProvider=orgData; totalPages = Math.ceil(totalRecord/pageSize); pageNumber.text=(pageIndex+1).toString(); totalRecordLabel.text = '总记录数：' + totalRecord.toString() } totalPagesLabel.text = '总页数：' + totalPages; if(isCreateNavBar) createNavBar(pageIndex); } // /** * 每页记录数变更（下拉框选择） */ private function pageSizeSelectChange():void{ refreshDataProvider(0,true,uint(pageSizeComobox.value)); } /** * 页码变更（直接输入） */ private function pageIndexInsertChange(event:Event):void{ var keyboardEvent:KeyboardEvent=event as KeyboardEvent; if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER){ var pageIndex:uint=uint(pageNumber.text)-1; if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex){ refreshDataProvider(pageIndex); } else{ pageNumber.text = (currentPageIndex+1).toString(); } } } /** * 查看所有 */ private function viewAll():void{ var tempTotalRecord:uint=0; if(pagingFunction!=null) tempTotalRecord=totalRecord; else tempTotalRecord=orgData.length; // pageSizeComobox.text=tempTotalRecord.toString(); pageSizeComobox.selectedIndex=-1; refreshDataProvider(0,true,tempTotalRecord); } ]]--> </mx:Script> <mx:HBox paddingTop="8"> <mx:Button id="firstNavBtn" icon="{firstIcon}" width="10" height="10" click="navigateButtonClick('firstPage');" /> <mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="navigateButtonClick('prePage');"/> </mx:HBox> <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}"/> <mx:HBox paddingTop="8"> <mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="navigateButtonClick('nextPage');"/> <mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="navigateButtonClick('lastPage');"/> </mx:HBox> <mx:VRule height="25"/> <mx:Label paddingTop="3" id="totalPagesLabel" text=""/> <mx:Label paddingTop="3" id="totalRecordLabel" text=""/> <mx:Label paddingTop="3" text="每页记录:"/> <mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/> <mx:Label paddingTop="3" text="页码:"/> <mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/> <mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/> </mx:HBox>

 

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

/** 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 } 文章来自学IT网：http://www.xueit.com/asp.net/show-5214-2.aspx

 

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

 

/** 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 } 文章来自学IT网：http://www.xueit.com/asp.net/show-5214-3.aspx
文章来自学IT网：http://www.xueit.com/asp.net/show-5214-3.aspx