自己写的一个flex分页的小部件

本来想找个针对flex分页的组件，但是现实当中一直没有找到一个适合自己的方案。没有最好，只有最合适，针对我做的东西，我写了一个小组件，在生产力方面有了显著的提高。希望对某些同学有所帮助。

注意：此分页组件是建立在以后台提供特定格式的XML为基础的。

分页组件由三部分组成 1 分页需要的工具类 2 组件界面及相关功能代码 3 后台XML

首先介绍两个工具类：

PagingTool.as,封装了分页时最常用到的参数

package org.wjh.pager
{
	import flash.net.URLVariables;
	
	public class PagingTool
	{
		//要读取的store
		private var store:DataStore = null;
		//每页显示多少个
		public var pageSize:int = 20;
		//从第几个开始,需要传参过去 计算方法：current*pageSize
		public var beginNum:int = 0;
		public var totalCount:int = 0;
		//当前页是第几页
		[Bindable]
		public var current:int = 0;
		//总共的页数 
		public var totalPage:int = 0;
		//需要传送的参数
		public var params:URLVariables = new URLVariables();
		//构造方法 需要构造的方法
		public function PagingTool(ds:DataStore) {
			this.store = ds;
			//后台取一定要注意 需要利用request.getParameter("begin")
			//或者request.getParameter("size")
			//从第begin条记录开始 取出size条记录
			params.begin = this.beginNum;
			params.size = this.pageSize;
		}
		
		
	}
}

 DataStore.as:封装读取xml时，需要传递的一些参数

package org.wjh.pager
{
	public class DataStore
	{
		//提供数据的URL
		public var url:String = "";
		//要读取的节点 XMLList
		public var node:String = "";
		//表明总条数的节点 这里暂时没有用到  判断总条数 固定为total
		public var totalNode:String = "";
	}
}

 接下来是，分页组件的界面和相关的事件响应代码块，本组件界面比较简单，包含下一页，上一页和一个combox跳转，各位可以根据实际需要做相应修改即可。

<?xml version="1.0" encoding="utf-8"?>
<mx:Canvas xmlns:mx="http://www.adobe.com/2006/mxml">
	<mx:Script>
		<![CDATA[
			import mx.rpc.events.FaultEvent;
			import mx.controls.List;
			import mx.rpc.events.ResultEvent;
			import flash.utils.getTimer;
			import mx.rpc.http.mxml.HTTPService;
			import mx.controls.DataGrid;
			import org.wjh.pager.PagingTool;
			import org.wjh.pager.DataStore;
			import mx.events.ResizeEvent;
			import mx.controls.Alert;
			[Bindable]
			public var store:DataStore = null;
			[Bindable]
			public var pagingTool:PagingTool = null;
			[Bindable]
			public var grid:DataGrid = null;
			[Bindable]
			private var combNum:int = 0;
			[Bindable]
			private var bindTotal:int = 0;
			//页面的初始化
			private function pageInit():void {
				//在走这一步以前，用户已经把pagingTool和Store设置好了
				var http:HTTPService = new HTTPService();
				http.url = store.url + "?time=" + new Date().getTime();
				http.showBusyCursor = true;
				http.method = "POST";
				http.resultFormat = "e4x";
				var params:URLVariables = pagingTool.params;
				params.begin = 0;
				params.size = pagingTool.pageSize;
				http.addEventListener(ResultEvent.RESULT,pageInitCallback);
				http.addEventListener(FaultEvent.FAULT,faultHand);
				http.send(params);
			}
			//如果用户需要重新设置参数  选择不一样的数据时 此方法起一定作用
			public function invoke():void {
				this.pageInit();
			}
			//页面的初始化
			private function pageInitCallback(e:ResultEvent):void {
				var xml:XML = XML(e.result);
				/**var xmlList:XMLList = xml.elements(store.node);*/
				var xmlList:XMLList = new XMLList(xml.elements(store.node));
				//Alert.show((xml.elements(store.node)) as String);
				//总数量节点必须要以total命名，暂时按照这个方式进行
				pagingTool.totalCount = int(xml.total);
				bindTotal = pagingTool.totalCount;
				pagingTool.totalPage = pagingTool.totalCount % pagingTool.pageSize == 0 ? pagingTool.totalCount / pagingTool.pageSize : pagingTool.totalCount / pagingTool.pageSize + 1;
				grid.dataProvider = xmlList;
				//当页面装载以后 分页工具的当前页变成了第一页
				pagingTool.current = 1;
				pagingTool.beginNum = pagingTool.pageSize * pagingTool.current;
				var array:Array = new Array();
				for(var count:int = 0; count < pagingTool.totalPage; count++) {
					array.push((count + 1) + "");
				}
				comb.dataProvider = array;
			}
			//下一页
			private function nextCallback(e:ResultEvent):void {
				var xml:XML = XML(e.result);
				/**var xmlList:XMLList = xml.elements(store.node);*/
				var xmlList:XMLList = new XMLList(xml.elements(store.node));
				grid.dataProvider = xmlList;
				pagingTool.current = pagingTool.current + 1;
				comb.selectedIndex = pagingTool.current - 1;
			}
			
			private function next():void {
				if(pagingTool.current == pagingTool.totalPage) {
					return;
				}
				var http:HTTPService = new HTTPService();
				http.url = store.url + "?time=" + new Date().getTime();
				http.showBusyCursor = true;
				http.resultFormat = "e4x";
				http.method = "post";
				http.addEventListener(ResultEvent.RESULT,nextCallback);
				http.addEventListener(FaultEvent.FAULT,faultHand);
				var params:URLVariables = pagingTool.params;
				params.begin = pagingTool.current * pagingTool.pageSize;
				params.size = pagingTool.pageSize;
				http.send(params);
			}
			//上一页
			private function privousCallback(e:ResultEvent):void {
				var xml:XML = XML(e.result);
				/**var xmlList:XMLList = xml.elements(store.node);*/
				var xmlList:XMLList = new XMLList(xml.elements(store.node));
				grid.dataProvider = xmlList;
				pagingTool.current = pagingTool.current - 1;
				comb.selectedIndex = pagingTool.current - 1;
			}
			
			private function privous():void {
				if(pagingTool.current == 1) {
					return;
				}
				var http:HTTPService = new HTTPService();
				http.url = store.url + "?time=" + new Date().getTime();
				http.showBusyCursor = true;
				http.resultFormat = "e4x";
				http.method = "post";
				http.addEventListener(ResultEvent.RESULT,privousCallback);
				http.addEventListener(FaultEvent.FAULT,faultHand);
				var params:URLVariables = pagingTool.params;
				//下一页的上一页  这里需要减去2
				params.begin = (pagingTool.current-2) * pagingTool.pageSize;
				params.size = pagingTool.pageSize;
				http.send(params);
			}
			//Combox的处理方式
			private function combChange(e:Event):void {
				var comNum:int = int((ComboBox(e.target).selectedIndex) + 1);
				combNum = comNum;
				if(combNum == pagingTool.current) {
					return;
				} else {
					var http:HTTPService = new HTTPService();
					http.url = store.url + "?time=" + new Date().getTime();
					http.showBusyCursor = true;
					http.resultFormat = "e4x";
					http.method = "post";
					http.addEventListener(ResultEvent.RESULT,combCallback);
					http.addEventListener(FaultEvent.FAULT,faultHand);
					var params:URLVariables = pagingTool.params;
					//下一页的上一页  这里需要减去2
					params.begin = (combNum - 1) * pagingTool.pageSize;
					params.size = pagingTool.pageSize;
					http.send(params);
				}
			}
			
			private function combCallback(e:ResultEvent):void {
				var xml:XML = XML(e.result);
				/**var xmlList:XMLList = xml.elements(store.node);*/
				var xmlList:XMLList = new XMLList(xml.elements(store.node));
				grid.dataProvider = xmlList;
				pagingTool.current = combNum;
			}
			
			private function faultHand(e:FaultEvent):void {
				trace(e.message + "      FaultEvent");
			}
		]]>
	</mx:Script>
	<mx:HBox>
		<mx:Button fontSize="12" label="上一页" click="privous()"/>
		<mx:Button fontSize="12" label="下一页" click="next()"/>
		<mx:ComboBox fontSize="12" id="comb" change="combChange(event)"/>
		<mx:Label text="总共{bindTotal}条记录" fontWeight="bold" fontSize="12"/>
	</mx:HBox>
</mx:Canvas>

 

 

具体用法介绍，在Demo中的某个Application运行时触发init方法

[Bindable]
private var ds:DataStore = new DataStore();
[Bindable]
private var pt:PagingTool = null;
private function init():void {
	System.useCodePage = true;
	ds.url = SharedObject.getLocal("config","/",false).data.server + "basic/Product";
	trace("ds.url-->>>" + ds.url);
	ds.node = "Product";
	/**构造PagingTool 必须*/ 
	pt = new PagingTool(ds);
	pt.params.oper = "list";
	//这里放进 查询参数
	pageCom.grid = dg;
	pageCom.store = ds;
	pageCom.pagingTool = pt;
	/**启动分页组件*/
	pageCom.invoke();
}

 

 STEP 1：指定DataStore的URL，也就是提供XML的URL

 STEP 2：指定DataStore要读取的XML节点

 STEP 3：指定PagingTool中显示数据的DataGrid(程序中的dg)

 STEP 4：指定PagingTool的相关参数

 STEP 5：启动分页组件

按照上面的方法，后台的产生的XML应该是这种格式

<任意名称>
  <Product>
      <读取的字段节点，根据实际需要>
      </读取的字段节点，根据实际需要>
       .......
  </Product>
  <!-- N个Product节点，每个Product节点对应DataGrid的一条记录 -->
  <!-- 务必使用total来表示记录总数量 -->
  <total>
    1800
  </total>
</任意名称>

   

核心程序介绍和大致的用法就是以上这些了，由于DEMO涉及到的代码比较繁杂，我就不提供附件下载了，各位在使用过程中如遇到什么疑问可以站内短信或留言联系

截个图：