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);
		}

 

 

 

 

 

评论

2 楼 www-hello 2010-09-13  

这个帖子写了由一段时间了，当时写的demo后来不小心删掉了。

1 楼 01jiangwei01 2010-08-16  

你好，能把demo发全一点吗？