首页 > 代码库 > flex分页2 新新的,一页多次调用互相不冲突

flex分页2 新新的,一页多次调用互相不冲突

直接先上源码;


分页组件Pager.mamx

<?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 com.gwtjs.events.PagerEvent;
			
			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 offset():int
			{
				return _offset;
			}
			
			public function set offset(value:int):void
			{
				_offset = value;
			}
			
			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();getBtnEnabled();
				//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;
					refrePageBtn.enabled = false;
				}else if(curpage==1){ //当前在第一页
					pageFirstBtn.enabled = false;
					pagePrevBtn.enabled = false;
					pageNextBtn.enabled = true;
					pageLastBtn.enabled = true;
					refrePageBtn.enabled = true;
				}else if(curpage<totalPage && curpage > 1){ //当前在中间页数,不在第一页也不在最后一页
					pageFirstBtn.enabled = true;
					pagePrevBtn.enabled = true;
					pageNextBtn.enabled = true;
					pageLastBtn.enabled = true;
					refrePageBtn.enabled = true;
				}else if(curpage==totalPage){ //当前在最后一页
					pageFirstBtn.enabled = true;
					pagePrevBtn.enabled = true;
					pageNextBtn.enabled = false;
					pageLastBtn.enabled = false;
					refrePageBtn.enabled = true;
				}
				/**如果有页数则刷新可用*/
				if(totalPage > 0)
				{
					refrePageBtn.enabled = true;
				}else{
					refrePageBtn.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 = http://www.mamicode.com/curpage;>


分页事件--PagerEvent.as

package com.gwtjs.events
{
	import flash.events.Event;
	
	public class PagerEvent extends Event
	{
		private var _pager:Object;
		
		public function set item(item:Object):void{
			this._pager = item;
		}
		
		public function get item():Object{
			return this._pager;
		}
		
		public function PagerEvent(type:String,obj:Object, bubbles:Boolean=false, cancelable:Boolean=false)
		{
			super(type, bubbles, cancelable);
			this._pager = obj;
		}
		
	}
}



Test.mamx

<mx:Canvas xmlns:fx="http://ns.adobe.com/mxml/2009" 
		   xmlns:s="library://ns.adobe.com/flex/spark" 
		   xmlns:mx="library://ns.adobe.com/flex/mx"
		 creationComplete="initHandler(event)" width="99%" height="780" xmlns:components="com.gwtjs.components.*">
	
	<fx:Script>
		<![CDATA[
			import com.gwtjs.events.PagerEvent;
			import com.gwtjs.renderer.grid.EnableItemIFactory;
			import com.gwtjs.util.SimpleIndexUtil;
			import com.gwtjs.window.UserAclEditorWindow;
			import com.gwtjs.window.UserBugTypesEditorWindow;
			import com.gwtjs.window.UserEditorWindow;
			import com.gwtjs.window.UserParentUserEditorWindow;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.events.CloseEvent;
			import mx.events.FlexEvent;
			import mx.managers.PopUpManager;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			[Bindable]
			private var currentItem:Object = new Object();
			
			[Bindable]
			private var userArray:ArrayCollection = new ArrayCollection([
				{userId:"1000101",userAccount:"playCol",userName:"张111",parentUser:"",userMobile:"13902762078",status:"1",userAclTypeCode:"10",userAclTypeNames:"超级管理员",bugTypeNames:"蠕虫病毒",bugTypeCodes:"1",userDesc:"说明"},
				{userId:"1000102",userAccount:"administrator",userName:"李芳",parentUser:"1000101",userMobile:"13902762078",status:"1",userAclTypeCode:"10",userAclTypeNames:"超级管理员",bugTypeNames:"木马植入",bugTypeCodes:"2",userDesc:"说明"},
				{userId:"10001",userAccount:"admin888",userName:"陈真",parentUser:"",userMobile:"13902762078",status:"1",userAclTypeCode:"10",userAclTypeNames:"超级管理员",bugTypeNames:"SQL注入",bugTypeCodes:"3",userDesc:"说明"},
				{userId:"10002",userAccount:"dzg867",userName:"王时",parentUser:"10001",userMobile:"13902762078",status:"1",userAclTypeCode:"20,30",userAclTypeNames:"安全管理员,检测人员",bugTypeNames:"木马植入",bugTypeCodes:"2",userDesc:"说明"},
				{userId:"10003",userAccount:"you29386",userName:"杨二辉",parentUser:"10002",userMobile:"13902762078",status:"1",userAclTypeCode:"30,40",userAclTypeNames:"检测人员",bugTypeNames:"SQL注入",bugTypeCodes:"3",userDesc:"说明"},
				{userId:"10004",userAccount:"zhang382",userName:"施文杰",parentUser:"10003",userMobile:"13902762078",status:"0",userAclTypeCode:"30",userAclTypeNames:"检测人员",bugTypeNames:"蠕虫病毒",bugTypeCodes:"1",userDesc:"说明"},
				{userId:"10005",userAccount:"guangdong",userName:"晓科",parentUser:"10003",userMobile:"13902762078",status:"1",userAclTypeCode:"20,40",userAclTypeNames:"安全管理员,修复人员",bugTypeNames:"SQL注入",bugTypeCodes:"3",userDesc:"说明"}
			]);
			
			[Bindable] 
			[Embed("assets/images/user_edit.png")] 
			private var userEditorIcon:Class;
			
			[Bindable] 
			[Embed("assets/images/user_add.png")] 
			private var userAddIcon:Class; 
			
			[Bindable] //叶子节点
			[Embed(source="assets/images/user_delete.png")]
			private var userDeleteIcon:Class;
			
			[Bindable] //叶子节点
			[Embed(source="assets/images/arrow_refresh_small.png")]
			private var refreshBtnIcon:Class;
			
			[Bindable] //定义渲染器 - 是否
			private var enabledRender:IFactory = new EnableItemIFactory();
			
			[Bindable]
			private var indexRenderer:Class = SimpleIndexUtil;
			
			import mx.formatters.DateFormatter;
			public function compareTime(str:String):Boolean
			{
				var myPattern1:RegExp=/-|:| /g;
				
				var dateFormatter:DateFormatter = new DateFormatter();
				dateFormatter.formatString = "YYYY-MM-DD JJ:NN:SS";
				var now:String= dateFormatter.format(new Date());
				
				str = dateFormatter.format(str);
				str = str.replace(myPattern1,'');
				
				now = now.replace(myPattern1,'');
				if(Number(str)>Number(now)){return true;}else{return false;}
			}
			
			public var time:String = "2014-11-29 18:33:22";
			
			/**
			 * 初始化函数 
			 */
			protected function initHandler(event:FlexEvent):void
			{
				var bool:Boolean = compareTime(time);
				if(bool){
					UserServicesController.getUsers(0,12);
				}
			}
			
			/**
			 * 数据请求成功处理
			 * */
			private function getUsersResultHandler(event:ResultEvent):void
			{
				var obj:Object = event.result;
				trace(obj.list,obj.totalCount);
				userArray = obj.list;
			}
			
			/**
			 * 请求异常
			 * 客户端的faultCode以Client开头,服务器端的faultCode以Server开头
			 * */
			private function httpServiceFault(event:FaultEvent):void
			{
				var str:String = "客户端异常";
				var index:int = -1;
				var faultCode:String = event.fault.faultCode.toString();
				index = faultCode.indexOf("Server", 0);
				if(index!=-1)
				{
					str= "服务端异常";
				}
				//trace(index,str);
				
				//客户端的faultCode以Client开头,服务器端的faultCode以Server开头
				Alert.show(event.fault.toString(),faultCode);
				trace(event.fault.toString());
			}
			
			/**添加用户*/
			protected function userAddClickHandler(event:MouseEvent):void
			{
				var itemEditorWindow:UserEditorWindow = new UserEditorWindow();
				
				//传值过去;
				itemEditorWindow.title = "新增用户条目";
				itemEditorWindow.action = "Insert";
				itemEditorWindow.items = userArray;
				itemEditorWindow.arrIndex = 0;
				
				PopUpManager.addPopUp(itemEditorWindow,this,true);
				PopUpManager.centerPopUp(itemEditorWindow);
			}
			
			/**
			 * 修改用户
			 * */
			protected function userEditorClickHandler(event:MouseEvent):void
			{
				var index:int = userDataGrid.selectedIndex;
				trace("103",index);
				currentItem = userArray.getItemAt(index);
				if(null==currentItem){
					Alert.show("请选择编辑的条目","信息提示");
					return;
				}
				var itemEditorWindow:UserEditorWindow = new UserEditorWindow();
				
				//传值过去;
				itemEditorWindow.title = "修改用户条目";
				itemEditorWindow.action = "Update";
				itemEditorWindow.items = userArray;
				itemEditorWindow.item = currentItem;
				itemEditorWindow.arrIndex = index;
				
				PopUpManager.addPopUp(itemEditorWindow,this,true);
				PopUpManager.centerPopUp(itemEditorWindow);
			}
			
			/**
			 * 删除用户
			 * */
			protected function userRemoveClickHandler(event:MouseEvent):void
			{
				var item:Object = userDataGrid.selectedItem;
				Alert.show("确定删除用户:"+item.userAccount+"密码 ?","信息提示",(1|2),this,function(event:CloseEvent):void{
					if(event.detail == Alert.YES){
						for(var i:int=0;i<userArray.length;i++){
							if(item.userId==userArray[i].userId){
								userArray.removeItemAt(i);
							}
						}
					}
				});
			}
			
			/**
			 * 删除用户
			 * */
			protected function resetUserClickHandler(event:MouseEvent):void
			{
				var item:Object = userDataGrid.selectedItem;
				Alert.show("确定重置用户:"+item.userAccount+"密码 ?","信息提示",(1|2),this,function(event:CloseEvent):void{
					if(event.detail == Alert.YES){
						Alert.show(item.userAccount+"密码重置成功!","信息提示");
					}
				});
			}
			
			[Bindable]
			public var offset:int=0;
			[Bindable]
			public var pageSize:int=20;
			/**
			 * 分页回调
			 * */
			protected function serverPagingBarFunctionHandler(event:Event):void
			{
				trace("分页回调");
			}
			
			/**
			 * 在这里调用分页查询
			 * */
			protected function userDataGridPagerEventHandler(event:PagerEvent):void
			{
				var obj:Object = event.item;
				var bool:Boolean = compareTime(time);
				if(bool){
					UserServicesController.getUsers(obj.offset,obj.pageSize);
				}
			}
			
		]]>
	</fx:Script>
	
	<fx:Declarations>
		<!-- 将非可视元素(例如服务、值对象)放在此处 -->
		<s:RemoteObject id="UserServicesController" destination="UserServicesController" fault="httpServiceFault(event)"
						endpoint="http://127.0.0.1:8080/buganalysis/messagebroker/amf">
			<s:method name="getUsers" result="getUsersResultHandler(event)" />
		</s:RemoteObject>
	</fx:Declarations>
	
	<mx:VBox width="100%" height="100%" verticalGap="0">
		
		<mx:HBox width="100%" height="32" horizontalAlign="left" styleName="panelTitleBg"
				 verticalAlign="middle" horizontalGap="0">
			<mx:LinkButton icon="@Embed(source='assets/images/icons/grid.png')" color="#FFFFFF" fontWeight="bold" label="用户管理" />
		</mx:HBox>
		
		<mx:VBox width="100%" height="100%" id="gridMainLayout" verticalGap="6" horizontalAlign="center" horizontalGap="6" paddingLeft="6" paddingRight="6" paddingBottom="6" paddingTop="6" >
			
			<mx:HBox width="100%" height="36" verticalAlign="middle" borderColor="#696969" backgroundColor="#E6E0E0" cornerRadius="6" >
				<mx:LinkButton label="新增用户" icon="{userAddIcon}" styleName="btnWeight" click="userAddClickHandler(event)" />
				<mx:LinkButton label="修改用户" icon="{userEditorIcon}" styleName="btnWeight" click="userEditorClickHandler(event)" />
				<mx:LinkButton label="删除用户" icon="{userDeleteIcon}" styleName="btnWeight" click="userRemoveClickHandler(event)" />
				<mx:LinkButton label="重置密码" styleName="twoRrfreshBtn" click="resetUserClickHandler(event)" />
				<mx:HBox width="100%" />
				<mx:LinkButton label="刷新" icon="{refreshBtnIcon}" />
			</mx:HBox>
			
			<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)}" visible="false" />
					<mx:DataGridColumn headerText="编号" dataField="userId" width="50" />
					<mx:DataGridColumn headerText="登陆帐号" dataField="userAccount" textAlign="left" width="160" />
					<mx:DataGridColumn headerText="用户姓名" dataField="userName" textAlign="left" width="160" />
					<mx:DataGridColumn headerText="所属上级" dataField="parentUser" textAlign="left" width="160">
						<!--
						<mx:itemRenderer>
						<fx:Component>
						<mx:HBox textAlign="center" verticalAlign="middle" horizontalAlign="left">
						<mx:LinkButton label="{data.parentUser}" width="88" click="outerDocument.parentUserBtnLickHandler(event)" />
						<mx:LinkButton width="16" icon="@Embed(source='assets/images/icons/page_attach.png')" click="outerDocument.parentUserBtnLickHandler(event)" />
						</mx:HBox>
						</fx:Component>
						</mx:itemRenderer>
						-->
					</mx:DataGridColumn>
					<mx:DataGridColumn headerText="手机号" dataField="userMobile" textAlign="left" width="160" />
					<mx:DataGridColumn headerText="工号状态" dataField="status" textAlign="center" width="80" itemRenderer="{enabledRender}" />
					<mx:DataGridColumn headerText="权限类别" dataField="userAclTypeNames" textAlign="left" width="180" visible="false">
						<!--
						<mx:itemRenderer>
						<fx:Component>
						<mx:HBox textAlign="center" verticalAlign="middle" horizontalAlign="left">
						<mx:LinkButton label="{data.userAclTypeNames}" click="outerDocument.bugTypeBtnLickHandler(event)" />
						<mx:LinkButton width="16" icon="@Embed(source='assets/images/icons/edit.gif')" click="outerDocument.bugTypeBtnLickHandler(event)" />
						</mx:HBox>
						</fx:Component>
						</mx:itemRenderer>
						-->
					</mx:DataGridColumn>
					<mx:DataGridColumn headerText="操作权限" dataField="bugTypeNames" textAlign="left" width="180">
						<!--
						<mx:itemRenderer>
						<fx:Component>
						<mx:HBox textAlign="center" verticalAlign="middle" horizontalAlign="left">
						<mx:LinkButton label="{data.bugTypeNames}" click="outerDocument.aclBtnLickHandler(event)" />
						<mx:LinkButton width="16" icon="@Embed(source='assets/images/icons/set-ico.gif')" click="outerDocument.aclBtnLickHandler(event)" />
						</mx:HBox>
						</fx:Component>
						</mx:itemRenderer>
						-->
					</mx:DataGridColumn>
					<mx:DataGridColumn headerText="用户说明" dataField="userDesc" textAlign="left" />
				</mx:columns>
			</mx:DataGrid>
			
			<components:Pager id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userDataGrid}" 
							  myPagerEvent="userDataGridPagerEventHandler(event)"
							  myFunction="serverPagingBarFunctionHandler(event)" offset="{offset}" pageSize="{pageSize}"
							  destination="userFlexServices" methodName="getUsers" height="26" width="100%" />
		</mx:VBox>
	</mx:VBox>
	
</mx:Canvas>


处理流程:

1.调用分页组件

<components:Pager id="serverPagingBar1" url="USER_DATAGRID" datagrid="{userDataGrid}" 
							  myPagerEvent="userDataGridPagerEventHandler(event)"
							  myFunction="serverPagingBarFunctionHandler(event)" offset="{offset}" pageSize="{pageSize}"
							  destination="userFlexServices" methodName="getUsers" height="26" width="100%" />

这里传入初始分页参数offset页偏移量,pageSize每页大小,myPagerEvent为分页处理事件,组件处理完分页参数后就分发事件,主页面可以执行此分页函数请求服务;


请求服务处理完成功后,再次将offset和pageSize传入Pager组件;








flex分页2 新新的,一页多次调用互相不冲突