Flex前台分頁

閑暇的時候，很無聊！随便寫了個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

Flex前台分頁

繼續閱讀

實作左右固定px，中間自适應的三列布局(雙飛翼布局)

AS3 類庫

flex 調試方法

CodeBehind and DI 分離MXML中的ActionScript

flex基礎——分别用MXML、ActionScript初始化controls元件

Flex的MXML檔案結構

Flex中如何通過建立新的XML命名空間（namespace），在MXML中使用flash.filters類

Flex實作代碼分離mxml/as

關于Flex及AS3的百多條小小知識

Flex和AS3的深度管理及排序

Flex AS3 －－連接配接字元串

[AS/FLEX] Flex AS3與Java的Socket通信 [AS/FLEX] Flex AS3與Java的Socket通信

比較Flash AS3與AS2特性與功能

在Windows上編譯Wireshark源代碼 .

關于Flex的一些學習資料

FLEX CSS樣式：類選擇器和類型選擇器的差別