Flex真真的分页,一个页面支持多次复用

源码:

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:fx="http://ns.adobe.com/mxml/2009" 
		 xmlns:s="library://ns.adobe.com/flex/spark" creationComplete="initHandler(event)"
		 xmlns:mx="library://ns.adobe.com/flex/mx" width="100%" height="100%" verticalAlign="middle">
	
	<!--
	/**
	
	这里注意，有四个重要的参数需要传递：
	1.pageSize:页面大小，每页显示多少条刻录,如果不传递，则按每页10条显示;
	2.destination:服务名称，具体可以参考代码；
	3.methodName:服务调用的方法，具体可以参考代码
	4.datagrid:使用分页的datagrid
	<p>
	<code>
	<control:PagingBar id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userAdg}" pageSize="3"
?destination="userFlexServices" methodName="getUsers" height="26" width="100%" />
	</code>
	</p>
	*/
	-->
	
	<fx:Script>
		<![CDATA[
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.controls.DataGrid;
			import mx.events.FlexEvent;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.rpc.remoting.RemoteObject;
			
			import spark.events.IndexChangeEvent;
			
			[Bindable]//记录数
			private var _items:ArrayCollection;
			
			[Bindable]//分页参数
			private var _params:Array = new Array();
			
			[Bindable]//每页显示的条数
			private var pageSizeBoxListData:ArrayCollection = new ArrayCollection([
				{pageSize:10},{pageSize:20},{pageSize:30},{pageSize:50},{pageSize:100}
			]);
			
			[Bindable]//每页显示的记录数
			public var pageSize:int = 10;
			
			[Bindable]//当前页
			public var curpage:int = 1;
			
			[Bindable]//下一页到多少记录数
			public var offset:int = 1;
			
			[Bindable]//总页数
			public var totalPage:int = 0;
			
			[Bindable]//总记录数
			private var _allRecorders:int = 263;
			
			private var _destination:String;
			
			private var _methodName:String;
			
			[Bindable]//组件宽度
			public var widthTo:int;
			
			//服务请求地址
			public var url:String;
			
			[Bindable]//datagrid
			private var _datagrid:DataGrid;
			
			public function get datagrid():DataGrid
			{
				return _datagrid;
			}

			public function set datagrid(value:DataGrid):void
			{
				_datagrid = value;
			}

			public function get items():ArrayCollection
			{
				return _items;
			}

			public function set items(value:ArrayCollection):void
			{
				_items = value;
			}

			public function get params():Array
			{
				return _params;
			}

			public function set params(value:Array):void
			{
				_params = value;
			}

			public function get methodName():String
			{
				return _methodName;
			}

			public function set methodName(value:String):void
			{
				_methodName = value;
			}

			public function get allRecorders():int
			{
				return _allRecorders;
			}

			public function set allRecorders(value:int):void
			{
				_allRecorders = value;
			}

			public function get destination():String
			{
				return _destination;
			}

			public function set destination(value:String):void
			{
				_destination = value;
			}

			/**
			 * 
			 */
			protected function progressBarClickHandler(event:MouseEvent):void
			{
				var bc:HBox = HBox(event.target);
				widthTo = event.localX;
				//progressBarEffect.target = progressBarPagerBlue;
				//progressBarEffect.play();
			}
			
			/**
			 * 
			 */
			private function getMinimum():int
			{
				if(allRecorders < 1)
				{
					return 0;
				}
				else
				{
					return 1;
				}
			}
			
			/**
			 * 
			 */
			protected function pageFirstClickHandler(event:MouseEvent):void
			{
				curpage = getMinimum();
				getBtnEnabled();
				pagingRemoteObject();
			}
			
			/**
			 * 上一页
			 */
			protected function pagePrevClickHandler(event:MouseEvent):void
			{
				var tempNum:int = getMinimum();
				curpage = curpage - 1;
				getBtnEnabled();
				pagingRemoteObject();
			}
			
			/**
			 * 跳转到指定页
			 */
			protected function pageStepperClickHandler(event:MouseEvent):void
			{
				curpage = pageStepper.value;
			}
			
			/**
			 * 下一页
			 */
			protected function pageNextClickHandler(event:MouseEvent):void
			{
				if(curpage < totalPage)
				{
					curpage = curpage + 1;
				}
				getBtnEnabled();
				pagingRemoteObject();
			}
			
			/**
			 * 最后一页
			 */
			protected function pageLastClickHandler(event:MouseEvent):void
			{
				curpage = totalPage;
				getBtnEnabled();
				pagingRemoteObject();
			}
			
			/**
			 * 刷新当前页
			 */
			protected function pageRefreshClickHandler(event:MouseEvent):void
			{
				totalPage = getTotalPageNum();
				pagingRemoteObject();
			}
			
			/**
			 * 初始化函数
			 */
			protected function initHandler(event:FlexEvent):void
			{
				//totalPage = getTotalPageNum();
				//pagingRemoteObject();
			}
			
			/**
			 * 设置每页显示多少条记录
			 */
			protected function pageSizeComboboxChangeHandler(event:IndexChangeEvent):void
			{
				var obj:Object = pageSizeCombobox.selectedItem;
				pageSize = obj.pageSize;
				trace(url,"",pageSize);
			}
			
			/**
			 * 求总页面数
			 * //计算总页面数-->总页数=(总记录数+每页显示的记录数-1)/每页显示的记录数
			 * */
			private function getTotalPageNum():int
			{
				return (allRecorders + pageSize - 1) / pageSize;
			}
			
			/**
			 * 获取总页数
			 */
			private function getBtnEnabled():void
			{
				if(totalPage<=1)//所有按钮全灰掉
				{
					pageFirstBtn.enabled = false;
					pagePrevBtn.enabled = false;
					pageNextBtn.enabled = false;
					pageLastBtn.enabled = false;
					pageRefreshBtn.enabled = false;
				}else if(curpage==1){ //当前在第一页
					pageFirstBtn.enabled = false;
					pagePrevBtn.enabled = false;
					pageNextBtn.enabled = true;
					pageLastBtn.enabled = true;
					pageRefreshBtn.enabled = true;
				}else if(curpage<totalPage && curpage > 1){ //当前在中间页数,不在第一页也不在最后一页
					pageFirstBtn.enabled = true;
					pagePrevBtn.enabled = true;
					pageNextBtn.enabled = true;
					pageLastBtn.enabled = true;
					pageRefreshBtn.enabled = true;
				}else if(curpage==totalPage){ //当前在最后一页
					pageFirstBtn.enabled = true;
					pagePrevBtn.enabled = true;
					pageNextBtn.enabled = false;
					pageLastBtn.enabled = false;
					pageRefreshBtn.enabled = true;
				}
				/**如果有页数则刷新可用*/
				if(totalPage > 0)
				{
					pageRefreshBtn.enabled = true;
				}else{
					pageRefreshBtn.enabled = false;
				}
			}
			
			/**
			 * 服务请求成功的处理
			 */
			private function serviceSuccessResult(event:ResultEvent):void
			{
				var results:ArrayCollection = ArrayCollection(event.result.list);
				trace(url,"请求成功,共"+_allRecorders+"条记录","每页显示",results,"n当前页",curpage);
				datagrid.dataProvider = results;
				totalPage = getTotalPageNum();
				pageStepper.value = curpage;
				
				getBtnEnabled();
				
				//发事件到上级视图
				this.dispatchEvent(new Event("myFunction"));
			}
			
			/**
			 * 服务请求失败的处理
			 */
			private function httpServiceFault(event:FaultEvent):void
			{
				Alert.show(event.fault.message,"服务请求失败");
			}
			
			/**
			 * 发送服务请求
			 */
			private function pagingRemoteObject():void
			{
				var remote:RemoteObject = new RemoteObject(destination);
				//页面偏移量这里计划好了,java不需要计算了
				offset = (curpage - 1)*pageSize;
				remote.getOperation(methodName).send(pageSize,offset);
				remote.addEventListener(ResultEvent.RESULT,serviceSuccessResult);
				remote.addEventListener(FaultEvent.FAULT,httpServiceFault);
			}
			
			/**
			 * 
			 */
			private function loadingDatagrid():void
			{
				
			}


			protected function refrePageBtnClickHandler(event:MouseEvent):void
			{
				// TODO Auto-generated method stub
			}


			private function pageHSliderChangeHandler(event:Event):void
			{
				curpage = pageStepper.value;
				getBtnEnabled();
				pagingRemoteObject();
			}

		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 -->
	</fx:Declarations>
	
	<fx:Metadata>
		[Event(name="myFunction",type="flash.events.Event")]
	</fx:Metadata>
	
	<mx:HBox width="30%" height="100%" verticalAlign="middle">
		<mx:LinkButton styleName="pageFirstBtn" id="pageFirstBtn" enabled="false" click="pageFirstClickHandler(event)" />
		<mx:LinkButton styleName="pagePrevBtn" id="pagePrevBtn" enabled="false" click="pagePrevClickHandler(event)" />
		
		<mx:LinkButton styleName="pageNextBtn" id="pageNextBtn" click="pageNextClickHandler(event)" />
		<mx:LinkButton styleName="pageLastBtn" id="pageLastBtn" enabled="true" click="pageLastClickHandler(event)" />
		
		<mx:HBox width="40%" height="100%" verticalAlign="middle">
			<s:Label text="Page" />
			<s:NumericStepper id="pageStepper" width="78" click="pageStepperClickHandler(event)"
							  maximum="{totalPage}" minimum="{_allRecorders!=0?1:0}" value="{curpage}" />
			<s:Label text=" Of " />
			<s:Label id="totalPageLab" text="{totalPage}" />
			<mx:LinkButton id="refrePageBtn" click="refrePageBtnClickHandler(event)" styleName="myRrfreshBtn" />
		</mx:HBox>
		
	</mx:HBox>
	
	<mx:HBox verticalAlign="middle">
		<s:ComboBox dataProvider="{pageSizeBoxListData}" skinClass="assets.skin.ComboBoxTextInputEditSkin" selectedIndex="1" width="60" labelField="pageSize"
					id="pageSizeCombobox" change="pageSizeComboboxChangeHandler(event)"/>
	</mx:HBox>
	
	<mx:LinkButton styleName="pageRefreshBtn" id="pageRefreshBtn" click="pageRefreshClickHandler(event)"/>
	
	<mx:HBox width="100%" height="100%" click="progressBarClickHandler(event)" verticalAlign="middle">
		<s:HSlider width="98%" stepSize="1" dataTipPrecision="0" 
				   maximum="{totalPage}" minimum="{_allRecorders!=0?1:0}" value="{curpage}" change="pageHSliderChangeHandler(event)"/>
	</mx:HBox>
	
	<s:BorderContainer x="0" y="0" width="40%" height="20" borderColor="0x336699" textAlign="center" visible="false">
		<s:Group id="hgimg" x="0" y="0" width="100%" height="100%" clipAndEnableScrolling="true">
			<mx:HBox width="60%" height="18" styleName="progressBarPageBlue" id="progressBarPageBlue">
				
			</mx:HBox>
			<mx:HBox width="96%" height="100%" paddingLeft="3" x="2" horizontalAlign="center" verticalAlign="middle">
				<s:Label text="Displaying "/>
				<s:Label text="{pageSize*curpage - 1 - pageSize}" id="pageStartLab"/>
				<s:Label text="-"/>
				<s:Label text="{pageSize*curpage - 1}" id="pageSizeLab"/>
				<s:Label text="of"/>
				<s:Label text="{_allRecorders}" id="allRecordsLab"/>
			</mx:HBox>
		</s:Group>
	</s:BorderContainer>
	
</mx:HBox>

引用:

<components:Pager id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userDataGrid}" pageSize="3"
							  destination="userFlexServices" methodName="getUsers" height="26" width="100%" /> 

<mx:DataGrid id="userDataGrid" headerStyleName="myHead" dataProvider="{userArray}" 
						 rowCount="{userArray.length}" textAlign="center" width="100%" height="100%"
						 verticalGridLineColor="#CCCCCC" horizontalGridLines="true" horizontalGridLineColor="#CCCCCC">
				<mx:columns>
					<mx:DataGridColumn headerText="序号" itemRenderer="{new ClassFactory(indexRenderer)}" width="50" />
					<mx:DataGridColumn headerText="登陆帐号" dataField="userAccount" textAlign="left" width="160" />
					<mx:DataGridColumn headerText="用户姓名" dataField="userName" textAlign="left" width="160" />
					<mx:DataGridColumn headerText="手机号" dataField="userMobile" textAlign="left" width="160" />
					<mx:DataGridColumn headerText="工号状态" dataField="status" textAlign="center" width="80" />
					<mx:DataGridColumn headerText="用户角色" dataField="userRolesNames" textAlign="left" width="180"/>
					<!--
					<mx:DataGridColumn headerText="详情" textAlign="center" width="78">
					<mx:itemRenderer>
					<fx:Component>
					<mx:HBox textAlign="center" verticalAlign="middle" horizontalAlign="center">  
					<mx:LinkButton label="" click="outerDocument.detailedBtnClickHandler(event)" icon="@Embed(source='assets/images/detail.jpg')"/>
					</mx:HBox>
					</fx:Component>
					</mx:itemRenderer>
					</mx:DataGridColumn>
					-->
					<mx:DataGridColumn headerText="用户说明" dataField="userDesc" />
				</mx:columns>
			</mx:DataGrid>
			<components:Pager id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userDataGrid}" pageSize="3"
							  myFunction="serverPagingBarFunctionHandler(event)"
							  destination="userFlexServices" methodName="getUsers" height="26" width="100%" />