每天学一点Flex（1）：DataGrid组件分页

有一段时间没有接触flex ，有点不怎会用flex。还好最近弄了一下分页的东西，对xml进行分页还是挺管用。借用之前封装好的类居然解决很久之前的问题。对DataGrid 的组件分页，可以通过对XML进行一些处理，看起来真的分页了。实际上只是一种错觉。



首先先准备一个数据源XML。大概以一个员工作姓名 年龄和性别 为数据源。这个XML 包含很多条员工的信息。下面只是显示2条，可以自己进行充。

<?xml version="1.0" encoding="UTF-8"?>
<member> 
   
   <worker>
   <name>jim</name>
    <age>12</age>
    <sex>man</sex>
   </worker>
   <worker>
   <name>lili</name>
    <age> 23</age>
    <sex> girl</sex>
   </worker>
</member>

//用于计算的分页类。包含分页的方式，当前页，显示分页数的。

package com.web
{
    //分页类
	public class Page
	{
		private var max:int;
		private var pagenum:int;
		private var currentPages:int;
		public function Page()
		{

		}		
		//设置分页项数
		public function set MaxRow(max:int):void
		{
			this.max=max;
		}
		//获取分页项数
		public function get MaxRow():int
		{
			return max;
		}
		
		public function set currentPage(value:int):void
		{
			
			this.currentPages=value;
		}
		
		public function get currentPage():int
		{
			return currentPages;
			
		}
		
		
		//获取总的分页数，利用求余的方式判断是不是整页
		public function getPageNumber(total:int):int
		{
			if (total%MaxRow==0)
			{
				pagenum=total/MaxRow;
			} else
			{
				pagenum=int(total/MaxRow)+1;
			}
			return pagenum;
		}
		
		public function get TotalPage():int
		{
			return pagenum;
		}
		
		//显示页码
		public function getPage():String
		{
			var str:String=(currentPage+1)+"/"+TotalPage; 
			return str;
		}
		
		
		
	}
}

下面为MXML。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
	 <mx:Script>
	 	<!--[CDATA[
	 		import mx.collections.ArrayCollection;
	 		import mx.rpc.events.ResultEvent;
	 		import mx.rpc.events.FaultEvent;
	 		import mx.controls.Alert;
	 		import com.web.Page;
	 		[Bindable]
	 		private var myurl:String="work.xml";
	 		
	 		private var page:Page=new Page();
	 		
	 		[Bindable] 
	 		private var TempList:ArrayCollection=new ArrayCollection();//临时的缓冲页
	 		 
	 		[Bindable]
	 		private var xml:XML;
	 		
	 		[Bindable]
	 		private var tempxml:XMLList;
	 		private var temp:int;
	 		private var count:int=0;//鼠标点击计算器
	 		private var total:int;
	 		
	 		[Bindable]
	 		private var currentPage:String; 
	 		
	 		private function init():void
	 		{
	 		  page.MaxRow=10;//初始化5条数据
	 		  hp.send();//发送请求	 		
	 		}
	 			 		
	 		private function completeHandler(event:ResultEvent):void
	 		{
	 		   xml=XML(event.result);
	 		   trace(xml);
	 		   tempxml=xml.worker;
	 		   total=page.getPageNumber(tempxml.length());//计算出总的分页数
	 		   showWorker(); 		   
	 		     		          
	 		}
	 		  
	 		  
	 		private function faultHandler(event:FaultEvent):void
	 		{
	 		     Alert.show("错误");	 		  
	 		}
	 		
	 		
	 		private function onNext(event:MouseEvent):void
	 		{
	 		   if(count<total-1)
	 		   {
	 		     count++;
	 		     page.currentPage=count;
	 		     showWorker();
	 		   }
	 		   	 			 		 
	 		}
            
            private function onPreview(event:MouseEvent):void
            {
                 if(count!=0)
                 {
                   count--;
                   page.currentPage=count;
                   showWorker()
                 }
                               
            }	 		
	 		
	 		//显示人数
	 		private function showWorker():void
	 		{
	 		   TempList.removeAll();
	 		   temp=page.MaxRow*(count+1)>tempxml.length() ? tempxml.length() :page.MaxRow*(count+1);
	 		    for (var i:int=page.MaxRow*count; i<temp; i++) 
	 		   {
	 		   	  TempList.addItem(tempxml[i]);
	 		   }
	 		   trace(TempList);
	 		  currentPage=page.getPage();
	 		
	 		}
	 		
	 		
	 		
	 	]]-->
	 </mx:Script>
	
	<mx:HTTPService id="hp"  url="{myurl}" useProxy="false"  resultFormat="e4x"
		result="completeHandler(event)"
	    fault="faultHandler(event)"/>
	<mx:Panel x="83.75" y="55" width="496.5105" height="343" layout="absolute">
		<mx:DataGrid  id="grid" x="0" y="0" dataProvider="{TempList}" width="476.5" height="263">
			<mx:columns>
				<mx:DataGridColumn headerText="姓名" dataField="name"/>
				<mx:DataGridColumn headerText="年龄" dataField="age"/>
				<mx:DataGridColumn headerText="性别" dataField="sex"/>
			</mx:columns>
		</mx:DataGrid>
		<mx:Button x="187.75" y="271" label="PreView" click="onPreview(event)"/>
		<mx:Button x="359.5" y="271" label="Next" width="77" click="onNext(event)"/>
		<mx:Label x="287" y="275" text="{currentPage}" width="49"/>
	</mx:Panel>
</mx:Application>

关键地方操作：采用了按钮点击次数来确定翻页。包括上一页，和下一页两个方法

private function onPreview(event:MouseEvent):void

private function onNext(event:MouseEvent):void



这种方式通过count点击的次数来确定翻了第二页。默认是0，其实就是第一页。这个部分可以自行修改。这里只是采用count 变量记录点了多少次数。



关键一个地方：在于对XML 节点进行选择，通过其他方式保存。这里可以是数组，或者ArrayCollection。两种方式自由选择。

每次读取的只是XML的一个片段，这个片段的节点用集合或者数组进行记录保存。然后绑定在DataGrid 地方，因此可以看到，其实每次DataGrid 显示的数据仅仅是XML的一个片段。至于这部分存取的内存的XML数据，依旧会占用内存的一部分，因此这部分损失依旧要计算出来。只是在使用策略上，不需要一下子显示到组件当中。

//显示人数
	 		private function showWorker():void
	 		{
	 		   TempList.removeAll();
	 		   temp=page.MaxRow*(count+1)>tempxml.length() ? tempxml.length() :page.MaxRow*(count+1);
	 		    for (var i:int=page.MaxRow*count; i<temp; i++) 
	 		   {
	 		   	  TempList.addItem(tempxml[i]);
	 		   }
	 		   trace(TempList);
	 		  currentPage=page.getPage();
	 		
	 		}

扩展：

通过DataGrip进行分页处理，可以处理很多的事情，例如有一些webgame的里面会进行对玩家的排名的这部分排名可以采用分页的技术来进行。还通过进行搜索的方式来进行集合。因此这部分的内容在开发当中会经常遇到的一些问题。