Flex前台分页

    闲暇的时候，很无聊！随便写了个Flex的前台分页。

    献丑！

    分页图片

   

 

    1.PageChangeEvent.as

    

package com.explor.util {
	
	import flash.events.Event;
	import mx.collections.ArrayCollection;
	
	public class PageChangeEvent extends Event {
		
		private var start:Number = 0;
		
		private var limit:Number = 0;
		
		public function PageChangeEvent(type:String, start:Number, limit:Number, bubbles:Boolean=true, cancelable:Boolean=false) {
			super(type, bubbles, cancelable);
			this.start = start;
			this.limit = limit;
		}
		
		public function Filter(gridCollection:ArrayCollection):ArrayCollection {
			var newArrayCollection:ArrayCollection = new ArrayCollection();
			for(var i:Number=start; i<(start + limit); i++) {
				if(i<gridCollection.length) {
					newArrayCollection.addItem(gridCollection.getItemAt(i));
				} else {
					break;
				}
			}
			return newArrayCollection;
		}
	}
}

    2.PageBar.mxml

   

<?xml version="1.0" encoding="utf-8"?>
<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" 
		   >
	<fx:Declarations>
		<!-- Place non-visual elements (e.g., services, value objects) here -->
	</fx:Declarations>
	
	<fx:Metadata>
		[Event(name="PageChange", type="com.explor.util.PageChangeEvent", bubbles="true", cancelable="true")]
	</fx:Metadata>
	
	<fx:Script>
		<![CDATA[
			import mx.controls.Alert;
			import mx.events.FlexEvent;
			
			import com.explor.util.Util;
			import com.explor.util.PageChangeEvent;
			// 开始索引
			[Bindable]
			private var start:Number = 0;
			// 最大记录集
			[Bindable]
			private var limit:Number = 20;
			// 当前页
			[Bindable]
			private var current:Number = 0;
			// 总页数
			[Bindable]
			private var pageCount:Number = 0;
			// 记录数
			[Bindable]
			private var recordCount:Number = 0;
			// 第1条记录
			[Bindable]
			private var firstRecord:Number = 0;
			// 最后1条记录
			[Bindable]
			private var lastRecord:Number = 0;
			
			[Bindable]
			[Embed(source="assets/images/page/first_enable.png")]
			private var firstEnable:Class;
			[Bindable]
			[Embed(source="assets/images/page/first_disable.png")]
			private var firstDisable:Class;

			[Bindable]
			[Embed(source="assets/images/page/previous_enable.png")]
			private var previousEnable:Class;
			[Bindable]
			[Embed(source="assets/images/page/previous_disable.png")]
			private var previousDisable:Class;
			
			[Bindable]
			[Embed(source="assets/images/page/next_enable.png")]
			private var nextEnable:Class;
			[Bindable]
			[Embed(source="assets/images/page/next_disable.png")]
			private var nextDisable:Class;
			
			[Bindable]
			[Embed(source="assets/images/page/last_enable.png")]
			private var lastEnable:Class;
			[Bindable]
			[Embed(source="assets/images/page/last_disable.png")]
			private var lastDisable:Class;
			
			[Bindable]
			[Embed(source="assets/images/page/refresh_enable.png")]
			private var refreshEnable:Class;
			[Bindable]
			[Embed(source="assets/images/page/refresh_disable.png")]
			private var refreshDisable:Class;
			// 初始化分页条
			public function initPageBar(recordCount:Number):void {
				this.recordCount = recordCount;
				this.start = 0;
				this.refreshPageBar();
				this.loadData();
			}
			// 刷新分页条
			private function refreshPageBar():void {
				this.btnEnable();
				this.pageCount = Math.ceil(this.recordCount / this.limit);
				if (this.recordCount != 0) {
					if (this.current == 0) {
						this.current = 1;
						this.firstRecord = 1;
						this.lastRecord = this.recordCount > this.limit ? this.limit : this.recordCount;
						this.btnEnable();
					} else if (this.current <= this.pageCount) {
						this.start = (this.current - 1) * this.limit
						this.changeStaticDisplay();
						this.btnEnable();
					} else {
						this.current = this.pageCount;
						this.start = (this.current - 1) * this.limit
						this.changeStaticDisplay();
						this.btnEnable();
					}
				} else {
					this.current = 0;
					this.changeStaticDisplay();
				}
			}
			// 改变静态显示数据
			private function changeStaticDisplay():void {
				if (this.recordCount != 0) {
					this.firstRecord = this.start + 1;
					if (this.recordCount > this.current * this.limit) {
						this.lastRecord = this.current * this.limit;
					} else {
						this.lastRecord = this.recordCount;
					}
//					this.refreshPage.setStyle("icon", refreshEnable);
				} else {
					this.firstRecord = this.lastRecord = 0;
//					this.refreshPage.setStyle("icon", refreshDisable);
				}
			}
			// 设置向后按钮状态
			private function backBtnEnable(flg:Boolean):void {
				this.firstPage.enabled = flg;
				this.previousPage.enabled = flg;
				if (flg) {
					this.firstPage.setStyle("icon", firstEnable);
					this.previousPage.setStyle("icon", previousEnable);
				} else {
					this.firstPage.setStyle("icon", firstDisable);
					this.previousPage.setStyle("icon", previousDisable);
				}
			}
			// 设置向前按钮状态
			private function frontBtnEnable(flg:Boolean):void {
				this.nextPage.enabled = flg;
				this.lastPage.enabled = flg;
				if (flg) {
					this.nextPage.setStyle("icon", nextEnable);
					this.lastPage.setStyle("icon", lastEnable);
				} else {
					this.nextPage.setStyle("icon", nextDisable);
					this.lastPage.setStyle("icon", lastDisable);
				}
			}
			// 设置按钮状态
			private function btnEnable():void {
				if (this.start < this.limit) {
					this.backBtnEnable(false);
				} else {
					this.backBtnEnable(true);
				}
				if (this.recordCount <= (this.start + this.limit)) {
					this.frontBtnEnable(false);
				} else {
					this.frontBtnEnable(true);
				}
			}
			// 计算开始索引、最大显示值
			private function pageChange_clickHandler(pageType:Button):void {
				this.pageSize.text = String(this.limit);
				if ('firstPage' == pageType.id) {
					this.start = 0;
					this.current = 1;
					this.changeStaticDisplay();
					this.btnEnable();
					this.loadData();
				} else if ('previousPage' == pageType.id) {
					this.start = this.start - this.limit;
					this.current--;
					this.changeStaticDisplay();
					this.btnEnable();
					this.loadData();
				} else if ('nextPage' == pageType.id) {
					this.start = this.start + this.limit;
					this.current++;
					this.changeStaticDisplay();
					this.btnEnable();
					this.loadData();
				} else if ('lastPage' == pageType.id) {
					this.start = (this.pageCount - 1) * this.limit;
					this.current = this.pageCount;
					this.changeStaticDisplay();
					this.btnEnable();
					this.loadData();
				} 
//				else if ('refreshPage' == pageType.id) {
//					if (this.current != 0) {
//						this.start = (this.current - 1) * this.limit
//						this.changeStaticDisplay();
//						this.btnEnable();
//						this.loadData();
//					}
//				}
			}
			// 重置开始索引、最大显示值
			private function pageChange_focusOutHandler(event:FocusEvent , pageType:TextInput):void {
				if ('pageSize' == pageType.id) {
					pageType.text = String(this.limit);
				} else if ('currentPage' == pageType.id) {
					pageType.text = String(this.current);
				}
			}
			// 计算开始索引、最大显示值
			private function pageChange_keyDownHandler(event:KeyboardEvent, pageType:TextInput):void {
				var flg:Boolean = false;
				if(event.keyCode == 13) {
					if ('pageSize' == pageType.id) {
						var inputLimit:Number = Number(pageType.text);
						if (!isNaN(inputLimit)) {
							inputLimit = Math.floor(inputLimit);
							if (inputLimit <= 0) {
								pageType.text = String(this.limit);
							} else {
								this.limit = Number(pageType.text);
								this.start = 0;
								this.refreshPageBar();
								flg = true;
							}
						} else {
							pageType.text = String(this.limit);
						}
					} else if ('currentPage' == pageType.id) {
						var inputCurrent:Number = Number(pageType.text);
						if (!isNaN(inputCurrent)) {
							inputCurrent = Math.floor(inputCurrent);
							if (inputCurrent <= 0) {
								if (inputCurrent == 0 && this.recordCount == 0) {
									this.current = Number(pageType.text);
								} else {
									pageType.text = String(this.current);
								}
							} else {
								if (inputCurrent > this.pageCount) {
									pageType.text = String(this.current);
								} else {
									this.current = Number(pageType.text);
									this.start = (this.current - 1) * this.limit;
									this.changeStaticDisplay();
									this.btnEnable();
									flg = true;
								}
							}
						} else {
							pageType.text = String(this.current);
						}
					}
					if (flg) {
						// 操作了
						this.loadData();
					}
				}
			}
			// 加载数据
			private function loadData():void {
				var event:PageChangeEvent = new PageChangeEvent('PageChange', this.start, this.limit);
				this.dispatchEvent(event);
			}
		]]>
	</fx:Script>
	
	<mx:ApplicationControlBar width="100%">
		<mx:Button id="firstPage" icon="{firstDisable}" chromeColor="{Util.backGroundColor}" paddingTop="1" paddingBottom="1" width="24" height="24" buttonMode="true" useHandCursor="true" click="pageChange_clickHandler(firstPage)"/>
		<mx:Button id="previousPage" icon="{previousDisable}" chromeColor="{Util.backGroundColor}" paddingTop="1" paddingBottom="1" width="24" height="24" buttonMode="true" useHandCursor="true" click="pageChange_clickHandler(previousPage)"/>
		<s:Label text="当前第"/>
		<s:TextInput id="currentPage" text="{current}" width="40" keyDown="pageChange_keyDownHandler(event, currentPage)" focusOut="pageChange_focusOutHandler(event, currentPage)"/>
		<s:Label text="页, 共{pageCount}页"/>
		<mx:Button id="nextPage" icon="{nextDisable}" chromeColor="{Util.backGroundColor}" paddingTop="1" paddingBottom="1" width="24" height="24" buttonMode="true" useHandCursor="true" click="pageChange_clickHandler(nextPage)"/>
		<mx:Button id="lastPage" icon="{lastDisable}" chromeColor="{Util.backGroundColor}" paddingTop="1" paddingBottom="1" width="24" height="24" buttonMode="true" useHandCursor="true" click="pageChange_clickHandler(lastPage)"/>
		<!--mx:Button id="refreshPage" icon="@Embed('assets/refresh_disable.png')" paddingTop="1" paddingBottom="1" width="24" height="24" buttonMode="true" useHandCursor="true" click="pageChange_clickHandler(refreshPage)"/-->
		<s:Label text="每页显示"/>
		<s:TextInput id="pageSize" text="{limit}" width="40" keyDown="pageChange_keyDownHandler(event, pageSize)" focusOut="pageChange_focusOutHandler(event, pageSize)"/>
		<s:Label text="条记录"/>
		<mx:Spacer width="100%"/>
		<s:Label text="当前数据{firstRecord}--{lastRecord}条	共{recordCount}条数据" />
	</mx:ApplicationControlBar>
	
</mx:Canvas>

   3.页面调用UserManage.mxml，你懂的！

  

<pageBar:PageBar id="pageBar" PageChange="pageChange_pageChangeHandler(event)" width="100%"/>

    3.1设置记录数

   

// 初始化数据
			private function initArrayCollection():void {
				this.pageBar.initPageBar(this.dataCollection.length);
			}

    3.2分页事件

   

// 分页事件
			private function pageChange_pageChangeHandler(event:PageChangeEvent):void {
				this.gridCollection = event.Filter(this.dataCollection);
			}

    注：

         page.zip      分页条图片

         Money.zip    分页效果AIR