Flex自定义控件——Pagebar分页控件

       开发时经常遇到用一个DataGrid分页显示数据的情况，然而Flex本身没有提供分页控件，给开发带来了不便。这里将自己开发时做的一个分页控件摆出来供刚入门的朋友参考。O(∩_∩)O~

 

 

 

采用BlazeDS与Java端通信

 

1. 一个Vo对象Page存放分页信息，以及相对应的Java端的Page对象

2. 一个很简单的自定义事件PageEvent

3. 调用。通过RemoteObject调用服务器的分页查询方法（返回值为Page对象）

 

 

一、JAVA端 

 

1、Page对象  （从SpringSide那借来的）

 /**
  * 分页对象. 包含当前页数据及分页信息如总记录数.
  */
 public   class  Page {
 /**
 * 默认每页记录数
 */
 private   static   final   int  DEFAULT_PAGE_SIZE =  20 ;


 /**
 * 每页的记录数
 */
 private   int  pageSize = DEFAULT_PAGE_SIZE;

 /**
 * 当前页第一条数据在List中的位置,从0开始
 */
 private   long  start =  0 ;

 /**
 * 总记录数
 */
 private   long  totalCount =  0 ;

 /**
 * 总页数
 */
 @SuppressWarnings ( "unused" )
 private   long  totalPageCount =  0 ;


 /**
 * 当前页数
 */
 @SuppressWarnings ( "unused" )
 private   long  currentPageNo;

 /**
 * 查询结果
 */
 private  List resultList;
 }

/**
 * 分页对象. 包含当前页数据及分页信息如总记录数.
 */
public class Page {
/**
* 默认每页记录数
*/
private static final int DEFAULT_PAGE_SIZE = 20;


/**
* 每页的记录数
*/
private int pageSize = DEFAULT_PAGE_SIZE; 

/**
* 当前页第一条数据在List中的位置,从0开始
*/
private long start = 0; 
 
/**
* 总记录数
*/
private long totalCount = 0; 

/**
* 总页数
*/
@SuppressWarnings("unused")
private long totalPageCount = 0;
 

/**
* 当前页数
*/
@SuppressWarnings("unused")
private long currentPageNo;

/**
* 查询结果
*/
private List resultList;
}

 

 

2、查询方法接口

 /**
 * 分页查询
 * @param condition 查询条件 （根据需求来定）
 * @param pageNo
 * @param pageSize
 * @return
 */
 public  Page pagedQuery(String condition,  int  pageNo,  int  pageSize);

/**
* 分页查询
* @param condition 查询条件 （根据需求来定）
* @param pageNo
* @param pageSize
* @return
*/
public Page pagedQuery(String condition, int pageNo, int pageSize);

 

 

二、Flex端 

 

1、Page对象(通过工具类生成)

 package lzh.demo.pagebar.model {
 import mx.collections.ArrayCollection;
 [RemoteClass(alias="lzh.demo.pagebar.model.Page" )]
 [Bindable]
 public class Page {
 /**
 * 默认每页记录数
 */
 public static const DEFAULT_PAGE_SIZE:int = 20 ;
 /**
 * 每页的记录数
 */
 public var pageSize:int = DEFAULT_PAGE_SIZE;
 /**
 * 当前页第一条数据在List中的位置,从0 开始
 */
 public var start:int;
 /**
 * 总记录数
 */
 public var totalCount:int;
 /**
 * 总页数
 */
 public var totalPageCount:int;
 /**
 * 当前页数
 */
 public var currentPageNo:int = 1 ;
 /**
 * 查询结果
 */
 public var resultList:ArrayCollection;
 public function Page() {
 }
 public static function buildPage(item:Object) :  Page{
 if(null==item) return null;
 var page:Page = new Page();
 page.pageSize = item.pageSize;
 page.start = item.start;
 page.data = item.data;
 page.totalCount = item.totalCount;
 page.totalPageCount = item.totalPageCount;
 page.currentPageNo = item.currentPageNo;
 page.resultList = item.resultList;
 return page;
 }
 }
 }

package lzh.demo.pagebar.model {
import mx.collections.ArrayCollection;
[RemoteClass(alias="lzh.demo.pagebar.model.Page")]
[Bindable]
public class Page {
/**
* 默认每页记录数
*/
public static const DEFAULT_PAGE_SIZE:int = 20;
/**
* 每页的记录数
*/ 
public var pageSize:int = DEFAULT_PAGE_SIZE; 
/**
* 当前页第一条数据在List中的位置,从0开始
*/ 
public var start:int;
/**
* 总记录数
*/ 
public var totalCount:int; 
/**
* 总页数
*/ 
public var totalPageCount:int; 
/**
* 当前页数
*/ 
public var currentPageNo:int = 1; 
/**
* 查询结果
*/  
public var resultList:ArrayCollection;
public function Page() {
}
public static function buildPage(item:Object) :  Page{
if(null==item) return null;
var page:Page = new Page();
page.pageSize = item.pageSize;
page.start = item.start;
page.data = item.data;
page.totalCount = item.totalCount;
page.totalPageCount = item.totalPageCount;
page.currentPageNo = item.currentPageNo;
page.resultList = item.resultList;
return page;
}
}
} 

 

 

2、PageEvent

 package lzh.demo.pagebar.event {
 import flash.events.Event;
 import lzh.demo.pagebar.model.Page;
 public class PageEvent extends Event {
 public var page:Page;
 public function PageEvent(page:Page, type:String) {
 super(type);
 this.page = page;
 }
 public override function clone():Event{
 return new PageEvent(page, type);
 }
 }
 }

package lzh.demo.pagebar.event {
import flash.events.Event;
import lzh.demo.pagebar.model.Page;
public class PageEvent extends Event {
public var page:Page;
public function PageEvent(page:Page, type:String) {
super(type);
this.page = page;
}
public override function clone():Event{
return new PageEvent(page, type);
}
}
}

 

 

3、PageBar

 <?xml version= "1.0"  encoding= "utf-8" ?>
 <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
 verticalAlign="bottom"
 creationComplete="init()"  horizontalGap= "4" >
 <mx:Metadata>
     [Event(name="goPage" ,type= "lzh.demo.pagebar.event.PageEvent" )]
 </mx:Metadata>
 <mx:Script>
 <![CDATA[
 import lzh.demo.pagebar.event.PageEvent;
 import lzh.demo.pagebar.model.Page;
 import mx.events.ListEvent;
 import mx.events.NumericStepperEvent;
 private var _page:Page;
 [Bindable]
 public function set page(page:Page):void{
 _page = page;
 configPageBar();
 }
 public function get page():Page{
     return _page;
 }
 [Bindable]
 /**
 * 在HorizontalList中显示的页码
 */
 public var pageNumbers:Array=[];
 /**
 * HorizontalList中显示的最大数字
 */
 private static const SIZE:int = 10 ;
 /**
 * HorizontalList左边显示的数量
 */
 private static const LEFT_SIZE:int = 2 ;
 private function init():void{
 if(null==_page) {
     _page = new Page();
 }
 configPageBar();
 }
 /**
 * 配置PageBar
 */
 private function configPageBar():void{
 configPageNumbers();
 hbFirst.addChild(lbtnFirst);
 hbPrev.addChild(btnPrev);
 hbNext.addChild(btnNext);
 hbLast.addChild(lbtnLast);
 // 左边的显示：首页\上一页
 if (1 ==_page.currentPageNo){
     hbFirst.removeChild(lbtnFirst);
     hbPrev.removeChild(btnPrev);
 } else if((1 <_page.currentPageNo) && (_page.currentPageNo<= 4 )){
     hbFirst.removeChild(lbtnFirst);
 }
 // 右边的显示：下一页\尾页
 if (_page.totalPageCount<=_page.currentPageNo){
     hbLast.removeChild(lbtnLast);
     hbNext.removeChild(btnNext);
 } else if(pageNumbers.indexOf(_page.totalPageCount)>-1 ){
     hbLast.removeChild(lbtnLast);
 }
 hListNumbers.columnCount = pageNumbers.length;
 }
 /**
 * 配置显示的可选页码
 */
 private function configPageNumbers():void{
 pageNumbers = [];
 if (_page.totalPageCount<1 ){ // 总页数为 0
     return;
 }
 var i:int=0 ;
 if (_page.currentPageNo<4  ){
 for(i=1 ; i<=_page.currentPageNo; i++){ //将<=currentPageNo的页码加入
 pageNumbers.push(i);
 }
 } else {
 for(i=LEFT_SIZE; i>=0 ; i--){
     pageNumbers.push(_page.currentPageNo-i);
 }
 }
 // 从currentPage后起，分别加入，总数不超过10
 for(i=1 ; pageNumbers.length<SIZE && (_page.currentPageNo+i)<=_page.totalPageCount; i++){
     pageNumbers.push(_page.currentPageNo+i);
 }
 if((pageNumbers.length<SIZE)
     &&
     pageNumbers.indexOf(_page.totalPageCount)>-1
     &&
     (pageNumbers.indexOf(1 )==- 1 )){
 pageNumbers = [];
 i =((_page.totalPageCount<SIZE)?_page.totalPageCount:SIZE) - 1 ;
 for ( ; i>=0 ; i--){
     pageNumbers.push(_page.totalPageCount-i);
 }
 }
 hListNumbers.selectedItem = _page.currentPageNo;
 }
 protected function btnPrev_clickHandler(event:MouseEvent):void {
     goPage((hListNumbers.selectedItem as uint) - 1 );
 }
 protected function btnNext_clickHandler(event:MouseEvent):void {
     goPage((hListNumbers.selectedItem as uint) + 1 );
 }
 /**
 * 向上分发事件，一般情况下，需要与服务器端通信
 */
 private function goPage(pageNo:uint):void{
     _page.currentPageNo = pageNo;
     this.dispatchEvent(new PageEvent(_page, "goPage" ));
 }
 protected function hListNumbers_changeHandler(event:ListEvent):void {
     goPage(hListNumbers.selectedItem as uint);
 }
 protected function lbtnFirst_clickHandler(event:MouseEvent):void {
     goPage(1 );
 }
 protected function lbtnLast_clickHandler(event:MouseEvent):void {
     goPage(_page.totalPageCount);
 }
 protected function pageSize_changeHandler(event:NumericStepperEvent):void {
 _page.totalPageCount = _page.totalCount / pageSize.value;
 _page.totalPageCount += ((_page.totalCount % pageSize.value)>0 )? 1 : 0 ;
 if (_page.totalPageCount>0 ){
     _page.currentPageNo = 1 ;
     goPage(_page.currentPageNo);
 }
 }
 protected function btnGo_clickHandler(event:MouseEvent):void {
 var pageNo:int = (Number)(targetPageNo.text);
 if (0 ==pageNo) {
     targetPageNo.text = 1  +  "" ;
 }
 if(pageNo<=0 ){
     targetPageNo.text = 1  +  "" ;
 }
 if (pageNo>_page.totalPageCount){
     targetPageNo.text = _page.totalPageCount + "" ;
 }
 pageNo = (Number)(targetPageNo.text);
 goPage(pageNo);
 }
 ]]>
 </mx:Script>
 <mx:Text text="{page.totalCount+'条记录'}"  />
 <mx:Text text="每页" />
 <mx:NumericStepper id="pageSize"
   minimum="10"  stepSize= "5"  maximum= "5000"  value= "20"
   change="pageSize_changeHandler(event)" />
 <mx:HBox id="hbFirst" >
 <mx:LinkButton id="lbtnFirst"  label= "1..."  fontWeight= "normal"  click= "lbtnFirst_clickHandler(event)" />
 </mx:HBox>
 <mx:HBox id="hbPrev" >
     <mx:Button id="btnPrev"  icon= "@Embed(source='/assets/prev_page.gif')"  enabled= "{1!=hListNumbers.selectedItem}"  toolTip= "上一页"  click= "btnPrev_clickHandler(event)"  cornerRadius= "20"  alpha= "1.0"  borderColor= "#FDFDFD"  width= "30" />
 </mx:HBox>
 <mx:HorizontalList id="hListNumbers"  dataProvider= "{pageNumbers}"
   columnCount="10"  columnWidth= "22"
   borderStyle="none"  backgroundColor= "#FFFFFF"  height= "23"
   change="hListNumbers_changeHandler(event)" >
 </mx:HorizontalList>
 <mx:HBox id="hbNext" >
     <mx:Button id="btnNext"  icon= "@Embed(source='assets/next_page.gif')"  enabled= "{page.totalPageCount!=hListNumbers.selectedItem}"  toolTip= "下一页"     click= "btnNext_clickHandler(event)"  cornerRadius= "20"  borderColor= "#F9FBFC"  width= "30" />
 </mx:HBox>
 <mx:HBox id="hbLast" >
     <mx:LinkButton id="lbtnLast"  label= "{'...'+page.totalPageCount}"  fontWeight= "normal"  click= "lbtnLast_clickHandler(event)" />
 </mx:HBox>
 <mx:TextInput maxChars="3"  restrict= "0-9"  textAlign= "right"  id= "targetPageNo" />
 <mx:Button label="Go"  cornerRadius= "10"  width= "50"  id= "btnGo"  click= "btnGo_clickHandler(event)" />
 </mx:HBox>

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
verticalAlign="bottom"
creationComplete="init()" horizontalGap="4">
<mx:Metadata>
	[Event(name="goPage",type="lzh.demo.pagebar.event.PageEvent")]
</mx:Metadata>
<mx:Script>
<![CDATA[
import lzh.demo.pagebar.event.PageEvent;
import lzh.demo.pagebar.model.Page;
import mx.events.ListEvent;
import mx.events.NumericStepperEvent;
private var _page:Page;
[Bindable]
public function set page(page:Page):void{
_page = page; 
configPageBar();
}
public function get page():Page{
	return _page; 
}
[Bindable]
/**
* 在HorizontalList中显示的页码
*/ 
public var pageNumbers:Array=[];
/**
* HorizontalList中显示的最大数字
*/ 
private static const SIZE:int = 10; 
/**
* HorizontalList左边显示的数量
*/ 
private static const LEFT_SIZE:int = 2; 
private function init():void{
if(null==_page) {
	_page = new Page();
}
configPageBar();
}
/**
* 配置PageBar
*/ 
private function configPageBar():void{
configPageNumbers();
hbFirst.addChild(lbtnFirst);
hbPrev.addChild(btnPrev);
hbNext.addChild(btnNext);
hbLast.addChild(lbtnLast);
// 左边的显示：首页\上一页
if (1==_page.currentPageNo){
	hbFirst.removeChild(lbtnFirst);
	hbPrev.removeChild(btnPrev);
} else if((1<_page.currentPageNo) && (_page.currentPageNo<=4)){
	hbFirst.removeChild(lbtnFirst);
}
// 右边的显示：下一页\尾页
if (_page.totalPageCount<=_page.currentPageNo){
	hbLast.removeChild(lbtnLast);
	hbNext.removeChild(btnNext);
} else if(pageNumbers.indexOf(_page.totalPageCount)>-1){
	hbLast.removeChild(lbtnLast);
}
hListNumbers.columnCount = pageNumbers.length;
} 
/**
* 配置显示的可选页码
*/  
private function configPageNumbers():void{
pageNumbers = [];
if (_page.totalPageCount<1){ // 总页数为0
	return;
}
var i:int=0;
if (_page.currentPageNo<4 ){
for(i=1; i<=_page.currentPageNo; i++){ //将<=currentPageNo的页码加入
pageNumbers.push(i);
}
} else {
for(i=LEFT_SIZE; i>=0; i--){ 
	pageNumbers.push(_page.currentPageNo-i);
}
}
// 从currentPage后起，分别加入，总数不超过10
for(i=1; pageNumbers.length<SIZE && (_page.currentPageNo+i)<=_page.totalPageCount; i++){
	pageNumbers.push(_page.currentPageNo+i);
}
if((pageNumbers.length<SIZE) 
	&&
	pageNumbers.indexOf(_page.totalPageCount)>-1 
	&& 
	(pageNumbers.indexOf(1)==-1)){
pageNumbers = [];
i =((_page.totalPageCount<SIZE)?_page.totalPageCount:SIZE) - 1;
for ( ; i>=0; i--){
	pageNumbers.push(_page.totalPageCount-i);
}
}
hListNumbers.selectedItem = _page.currentPageNo;
}
protected function btnPrev_clickHandler(event:MouseEvent):void {
	goPage((hListNumbers.selectedItem as uint) - 1);
}
protected function btnNext_clickHandler(event:MouseEvent):void {
	goPage((hListNumbers.selectedItem as uint) + 1);
}
/**
* 向上分发事件，一般情况下，需要与服务器端通信
*/ 
private function goPage(pageNo:uint):void{
	_page.currentPageNo = pageNo;
	this.dispatchEvent(new PageEvent(_page, "goPage"));
}
protected function hListNumbers_changeHandler(event:ListEvent):void {
	goPage(hListNumbers.selectedItem as uint);
}
protected function lbtnFirst_clickHandler(event:MouseEvent):void {
	goPage(1);
}
protected function lbtnLast_clickHandler(event:MouseEvent):void {
	goPage(_page.totalPageCount);
}
protected function pageSize_changeHandler(event:NumericStepperEvent):void {
_page.totalPageCount = _page.totalCount / pageSize.value;
_page.totalPageCount += ((_page.totalCount % pageSize.value)>0)?1:0;
if (_page.totalPageCount>0){
	_page.currentPageNo = 1;
	goPage(_page.currentPageNo);
}
}
protected function btnGo_clickHandler(event:MouseEvent):void {
var pageNo:int = (Number)(targetPageNo.text);
if (0==pageNo) {
	targetPageNo.text = 1 + "";
}
if(pageNo<=0){
	targetPageNo.text = 1 + "";
}
if (pageNo>_page.totalPageCount){
	targetPageNo.text = _page.totalPageCount + "";
}
pageNo = (Number)(targetPageNo.text);
goPage(pageNo);
}
]]>
</mx:Script>
<mx:Text text="{page.totalCount+'条记录'}" />
<mx:Text text="每页"/>
<mx:NumericStepper id="pageSize" 
  minimum="10" stepSize="5" maximum="5000" value="20" 
  change="pageSize_changeHandler(event)"/>
<mx:HBox id="hbFirst">
<mx:LinkButton id="lbtnFirst" label="1..." fontWeight="normal" click="lbtnFirst_clickHandler(event)"/>
</mx:HBox>
<mx:HBox id="hbPrev">
	<mx:Button id="btnPrev" icon="@Embed(source='/assets/prev_page.gif')" enabled="{1!=hListNumbers.selectedItem}" toolTip="上一页" click="btnPrev_clickHandler(event)" cornerRadius="20" alpha="1.0" borderColor="#FDFDFD" width="30"/>
</mx:HBox>
<mx:HorizontalList id="hListNumbers" dataProvider="{pageNumbers}" 
  columnCount="10" columnWidth="22" 
  borderStyle="none" backgroundColor="#FFFFFF" height="23"
  change="hListNumbers_changeHandler(event)">
</mx:HorizontalList>
<mx:HBox id="hbNext">
	<mx:Button id="btnNext" icon="@Embed(source='assets/next_page.gif')" enabled="{page.totalPageCount!=hListNumbers.selectedItem}" toolTip="下一页" 	click="btnNext_clickHandler(event)" cornerRadius="20" borderColor="#F9FBFC" width="30"/>
</mx:HBox>
<mx:HBox id="hbLast">
	<mx:LinkButton id="lbtnLast" label="{'...'+page.totalPageCount}" fontWeight="normal" click="lbtnLast_clickHandler(event)"/>
</mx:HBox>
<mx:TextInput maxChars="3" restrict="0-9" textAlign="right" id="targetPageNo"/>
<mx:Button label="Go" cornerRadius="10" width="50" id="btnGo" click="btnGo_clickHandler(event)"/>
</mx:HBox>

 

 

4、调用

 <components:PageBar id= "pageBar"  goPage= "pagedQuery()" />

 /**
 * 调用服务器端方法
 */
 private function pagedQuery():void{
     itemManager.pagedQuery( condition.text, pageBar.page.currentPageNo, pageBar.pageSize.value); }
 }


 /**
  * 相应分页查询方法
  */
 private function onPagedQuery(event:ResultEvent):void{
     pageBar.page = Page.buildPage(event.result); items = pageBar.page.resultList;  // items为DataGrid的dataProvider
 }

<components:PageBar id="pageBar" goPage="pagedQuery()"/>

/**
* 调用服务器端方法
*/
private function pagedQuery():void{ 
	itemManager.pagedQuery( condition.text, pageBar.page.currentPageNo, pageBar.pageSize.value); }
}
 

/**
 * 相应分页查询方法
 */
private function onPagedQuery(event:ResultEvent):void{
	pageBar.page = Page.buildPage(event.result); items = pageBar.page.resultList;  // items为DataGrid的dataProvider
}