Flex翻頁控件

頁面代碼(FlexPager.mxml):

<?xml version="1.0" encoding="utf-8"?>
<mx:ControlBar xmlns:mx="http://www.adobe.com/2006/mxml"
			   width="100%"
			   height="40"
			   horizontalAlign="right"
			   paddingRight="20"
			   initialize="setState(false)"
			   verticalAlign="middle">

	<mx:Script source="FlexPager_script.as"/>

	<mx:Metadata>
		[Event(name="pageChange")] 
	</mx:Metadata>

	<mx:StringValidator id="jumpPage_validator"
						source="{jumpPage_input}"
						required="true"
						requiredFieldError="請輸入跳轉頁碼"
						property="text"
						enabled="false"/>

	<mx:Button click="firstPage()"
			   id="firstBtn"
			   label="首頁"/>
	<mx:Button click="prevPage()"
			   id="prevBtn"
			   label="上一頁"/>
	<mx:Button click="nextPage()"
			   id="nextBtn"
			   label="下一頁"/>
	<mx:Button click="lastPage()"
			   id="lastBtn"
			   label="末頁"/>
	<mx:Label text="跳至:"/>

	<mx:TextInput id="jumpPage_input"
				  width="60"
				  maxChars="8"
				  restrict="[0-9]"/>
	<mx:Label text="頁"/>
	<mx:Button click="jumpPage();"
			   id="jumpBtn"
			   label="GO"/>
	<mx:Label id="pageInfo"/>
</mx:ControlBar>

 AS代碼(FlexPager_script.as):

import mx.events.IndexChangedEvent;
import mx.validators.Validator;

import cn.zlj.event.MyEvent;

//總頁數
private var _pageCount:int=0;
//總記錄數
private var _recordCount:int=0;
//每頁記錄數
private var _pageSize:int=10;
//起始頁的索引 
private var _pageIndex:int=0;

//起始記錄的索引 
public function get startIndex():int
{
	return ((_pageIndex < 1 ? 1 : _pageIndex) - 1) * this.pageSize;
}

//設置記錄總數
public function set recordCount(value:int):void
{
	//設置記錄的總數
	if (value <= 0)
	{
		_recordCount=0;
		_pageIndex=0;
		_pageCount=0;
	}
	else
	{
		_recordCount=value;
		_pageIndex=1;
		_pageCount=Math.ceil(_recordCount / _pageSize) <= 0 ? 1 : Math.ceil(_recordCount / _pageSize);
	}
	setState(false);
}

//每頁記錄數:最少5條
public function set pageSize(value:int):void
{
	if (value < 5)
	{
		value=5;
	}
	_pageSize=value;
}

public function get pageSize():int
{
	return _pageSize;
}

//上一頁
public function prevPage():void
{
	_pageIndex-=1;
	setState();
}

//第一頁
public function firstPage():void
{
	_pageIndex=1;
	setState();
}

//下一頁
public function nextPage():void
{
	_pageIndex+=1;
	setState();
}

//最終頁
public function lastPage():void
{
	_pageIndex=_pageCount;
	setState();
}

//跳轉
public function jumpPage():void
{
	jumpPage_validator.enabled=true;
	var validators:Array=new Array();
	validators.push(jumpPage_validator);
	if (Validator.validateAll(validators).length > 0)
	{
		return;
	}
	//獲取輸入跳轉頁的值
	var __pageIndex:Number=Number(jumpPage_input.text);
	if (__pageIndex < 1)
	{
		__pageIndex=1;
	}
	else if (__pageIndex > _pageCount)
	{
		__pageIndex=_pageCount;
	}
	_pageIndex=__pageIndex;

	jumpPage_validator.enabled=false;
	jumpPage_input.text="";

	setState();
}

//各個按鈕的狀態
private function setState(dispatchEvent:Boolean=true):void
{
	if (_pageCount > 1)
	{
		firstBtn.enabled=true;
		nextBtn.enabled=true;
		prevBtn.enabled=true;
		lastBtn.enabled=true;
		jumpBtn.enabled=true;
		if (_pageIndex <= 1)
		{
			prevBtn.enabled=false;
			firstBtn.enabled=false;
		}
		if (_pageIndex == _pageCount)
		{
			nextBtn.enabled=false;
			lastBtn.enabled=false;
		}
	}
	else
	{
		firstBtn.enabled=false;
		nextBtn.enabled=false;
		prevBtn.enabled=false;
		lastBtn.enabled=false;
		jumpBtn.enabled=false;
	}

	//頁碼,總啓示錄數顯示 形式:共 53977 條 第 1/2999 頁
	pageInfo.text="共" + _recordCount.toString() + "條 第" + _pageIndex.toString() + "/" + _pageCount.toString() + "頁";
	if (dispatchEvent)
	{
		onPageChange();
	}
}

//翻頁
private function onPageChange():void
{
	//依據當前頁面索引和每頁記錄數來構造一個“頁面改變事件”
	var eventData:Object=new Object();
	eventData.rowFrom=startIndex;
	eventData.pageSize=_pageSize;
	var e:ExpotiaEvent=new MyEvent(MyEvent.PAGE_CHANGED, eventData);
	dispatchEvent(e);
}

//刷新當前頁
public function refresh():void
{
	onPageChange();
}

 上邊用到的自定義事件MyEvent.as文件

package cn.zlj.event
{
	import flash.events.Event;

	public class MyEventextends Event
	{
		//通過事件發送的數據 
		public var eventData:Object;

		public function MyEvent(type:String, eventData:Object=null, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			this.eventData=eventData;
			super(type, bubbles, cancelable);
		}
               //翻頁事件
		public static const PAGE_CHANGED:String="pageChange";
	}
}

 

使用方法頁面代碼:

<mx:DataGrid id="dg1">
			<mx:columns>
				<mx:DataGridColumn headerText="ID" 
								   dataField="id"/>
				<mx:DataGridColumn headerText="名字" 
					       dataField="name"/>				   
			</mx:columns>
		</mx:DataGrid>
		<component:FlexPager width="100%"
							 id="pager"
							 pageSize="15"/>

 

頁面邏輯代碼:

//查詢
		public function query():void
		{
			if (_queryCondition == null)
			{
				return;
			}
			_pager.enabled=false;
			queryCountMethod.queryCount(_queryCondition);
		}

//處理查詢記錄數返回的結果
		private function countResultHandler(event:ResultEvent):void
		{
			var count:int=int(event.result);
			pager.recordCount=count;
			if (count > 0)
			{
				//查詢member數據
				queryList(_pager.pageSize, 0);
			}
			else
			{
				var dgProvider:ArrayCollection=ArrayCollection(_dg.dataProvider);
				//清空數據
				if (dgProvider != null)
				{
					(dg1.dataProvider as ArrayCollection).removeAll();
				}
			}
		}

//查詢列表
		public function queryList(pageSize:int, rowFrom:int):void
		{
			//翻頁skipRows 
			_queryCondition.skipRows=rowFrom;
			//一頁最大記錄數
			_queryCondition.rowRecords=pageSize;

			pager.enabled=false;
                       //調用後臺查詢
			queryListMethod.queryList(_queryCondition);
		}
//翻頁處理
		private function pageChangedHandler(event:MyEvent):void
		{
			if(_queryCondition == null) {
				return;
			}
			var rowFrom:int=event.eventData.rowFrom
			var pageSize:int=event.eventData.pageSize
			queryList(pageSize, rowFrom);
		}