Flex实现分页显示功能(mx:DataGrid)

Flex使用DataGrid实现的分页显示在线运行效果见：http://tongqiuyan.blog.163.com/blog/static/19554530220119267352154/

静态效果：

通过提供的“首页”、“上一页”、“下一页”、“末页”和“跳转”等按钮，能够随意显示相关页面的数据。

相关源码如下：

分页组件代码

 
 

<?xml?version="1.0"?encoding="utf-8"?> ?
  
  

<mx:VBox?xmlns:mx="http://www.adobe.com/2006/mxml"?initialize="initData(dataProvider);"> ?

  
  
????<mx:Script> ?
  
  
????????<![CDATA[ ?
  
  
????????????import?mx.collections.ArrayCollection; ?
  
  
????????????//?当前需要显示的记录 ?
  
  
????????????[Bindable] ?
  
  
????????????private?var?mypagedata:ArrayCollection?=?new?ArrayCollection(); ?
  
  
????????????[Bindable] ?
  
  

????????????public?var?columns:Array;?//?数据集合 ?

  
  

????????????public?var?dataProvider:ArrayCollection;?//?所有数据 ?

  
  

????????????public?var?pageCount:int?=?6;//?每页包含的记录数，默认6条 ?

  
  

????????????public?var?curPage:int;?//?当前页码 ?

  
  

????????????public?var?totalPage:int;?//?总页数 ?

  
  

????????????public?var?totalCount:int;?//?总记录条数 ?

  
  

????????????public?function?initData(value:ArrayCollection):void ?

  
  
????????????{ ?
  
  
????????????????//?将所有的数据都赋值给?dataProvider?变量 ?
  
  
????????????????dataProvider?=?value; ?
  
  
????????????????//?移除当前页面中所有数据记录 ?
  
  
????????????????mypagedata.removeAll(); ?
  
  

????????????????if(null?!=?dataProvider?&&?dataProvider.length?>?0) ?

  
  
????????????????{ ?
  
  
????????????????????totalCount?=?dataProvider.length; ?
  
  
????????????????????totalPage?=?(totalCount?+?pageCount?-1)/pageCount; ?
  
  
????????????????????setPager(0); ?
  
  
????????????????????inputpage.minimum=1; ?
  
  
????????????????????inputpage.maximum=?totalPage; ?
  
  

????????????????}else{ ?

  
  
????????????????????totalCount?=?0; ?
  
  
????????????????????totalPage?=?0; ?
  
  
????????????????????curPage?=?0; ?
  
  
????????????????????inputpage.minimum=0; ?
  
  
????????????????????inputpage.maximum=?0; ?
  
  

????????????????????pagedetail.text?=?"第?0?页/共?0?页?共?0?条记录"; ?

  
  
????????????????} ?
  
  
????????????} ?
  
  

????????????public?function?setPager(value:int):void ?

  
  
????????????{ ?
  
  
????????????????if(value?<0?||?(value+1)>totalPage){ ?
  
  

????????????????????return; ?

  
  
????????????????} ?
  
  
????????????????curPage?=?value; ?
  
  
????????????????//?计算跳转到页面中的第一条记录所在记录中是第几条记录 ?
  
  

????????????????var?curNum?:?int?=?value*pageCount; ?

  
  
????????????????//?清空当前显示的数据记录 ?
  
  
????????????????mypagedata.removeAll(); ?
  
  

????????????????for(var?i:int?=?0;?curNum<dataProvider.length&&i<pageCount;?i++,curNum++){ ?

  
  
????????????????????mypagedata.addItem(dataProvider.getItemAt(curNum)); ?
  
  
????????????????} ?
  
  

????????????????var?temp:int=curPage+1; ?

  
  

????????????????pagedetail.text?=?"第?"+temp+"?页/共?"+totalPage+"?页?共?"+totalCount+"?条记录"; ?

  
  
????????????????cudg.dataProvider?=?mypagedata; ?
  
  
????????????} ?
  
  
????????]]> ?
  
  
????</mx:Script> ?
  
  

????<mx:DataGrid?id="cudg"?columns="{columns}"?width="100%"?height="100%"?/> ?

  
  

????<mx:HBox?verticalAlign="middle"?horizontalAlign="center"> ?

  
  

????????<mx:Label?text="第?0?页/共?0?页"?id="pagedetail"?/> ?

  
  

????????<mx:LinkButton?label="首页"?click="setPager(0);"?/> ?

  
  

????????<mx:LinkButton?label="上一页"?click="setPager(curPage?-?1);"?/> ?

  
  

????????<mx:LinkButton?label="下一页"?click="setPager(curPage?+?1);"?/> ?

  
  

????????<mx:LinkButton?label="末页"?click="setPager(totalPage?-?1);"?/> ?

  
  

????????<mx:NumericStepper?id="inputpage"?stepSize="1"?minimum="0"?maximum="0"?/> ?

  
  

????????<mx:LinkButton?label="跳转"?click="setPager(inputpage.value?-?1);"?/> ?

  
  
????</mx:HBox> ?
  
  
</mx:VBox>?
 
 

涉及控件包括：<mx:DataGrid>、<mx:HBox>、<mx:LinkButton>、<mx:NumericStepper>等。