flex DataGrid

由于我的DataGrid与JAVA后台交互需要返回JSON格式的字符串，所以需要在客户端来解析JSON串，用到JSON相关类，所以Flex4还缺少一个文件corelib.swc
将corelib.swc拷贝到Flex安装目录的sdks\4.0.0\frameworks\libs下

这个文件导入后重启MyEclipse就可以使用JSON类了

 

1，客户端、服务端

　　（1）客户端分页：将数据一次性取到客户端，客户要看哪一页的数据，显示哪一页的数据。

　　（2）服务端分页：客户要看哪一页的数据，向服务端请求哪一页的数据，客户端将请求到的数据显示给用户（可以在客户端、服务端分别做缓存，加快数据的读取），由于flex本身不具有数据库访问能力，可以考虑通过 WebServices向服务器传递数据，数据的表示形式可以是XML、JSON（本文采用XML的形式）

2，分页表示层的设计

　　（1）页码条中4个按钮；这四个按钮分别为转到第一页，前一页，后一页，最后一页；当这四个按钮中的任意一点被点击时，页码要重绘，当前页码变化；且还要考虑当页码中有第一页时，前两个按钮要隐藏起来；当页码中有最后一页时，后两个按钮要隐藏起来。

　　（2）页码条中页码；当点击页码条中的页码时，DataGrid中更新显示数据即可，当前页码变化。
　（3）显示总页数，总记录数；

　　（4）每页记录数，让用户通过下拉框选择；当用户选择新的每页显示记录数时，页码要重绘，总页数发生变化，当前页码变化。

　　（5）页码输入框，让用户输入任意页码（要检查输入数据是否合法），DataGrid显示页码中的数据，页码要重绘，总页数变化。

　　（6）查看所有；分页中的特殊情况，将每页记数置为记录总数即可达到要求！页码要重绘，总页数发生变化，当前页码变化

代码说明
（1）分页功能条，做一个自定义组件
（2）页码条绘制方法，传参数为页码中的第一个页码
3.分页触发的方法，组件中有一个属性为pagingFunction，为向服务端请求数据的函数；当该函数为空时，调用客户端分页；反之调用该方法进行服务端分页。

 

首先说明下：以下的四个例子中每一个都含有客户端获取DataGrid数据的代码

下面的每个mxml中都涉及用到的组件mxml,位于com/control目录下

Xml代码  

1. <xml version="1.0" encoding="utf-8"?>  
2. <mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white">  
3.     <mx:Script>  
4.         <![CDATA[  
5.                   import mx.collections.ArrayCollection;  
6.                   import mx.events.ItemClickEvent;  
7.                   import flash.events.KeyboardEvent;  
8.                   import mx.controls.DataGrid;  
9.                   import mx.validators.NumberValidator;  
10.  
11.                   [Bindable]  
12.                   [Embed(source='assets/first.jpg')]  
13.                   private var firstIcon:Class;                  
14.                   private var firstPage:uint;   
15.                     
16.                   [Bindable]  
17.                   [Embed(source='assets/pre.jpg')]  
18.                   private var preIcon:Class;  
19.                   private var prePage:uint;   
20.               
21.                   [Bindable]  
22.                   [Embed(source='assets/next.jpg')]  
23.                   private var nextIcon:Class;  
24.                   private var nextPage:uint;   
25.  
26.                   [Bindable]  
27.                   [Embed(source='assets/last.jpg')]  
28.                   private var lastIcon:Class;  
29.                   private var lastPage:uint;  
30.                              
31.                   //页码条数据,绑定  
32.                   [Bindable]  
33.                   private var nav:ArrayCollection = new ArrayCollection();  
34.                     
35.                   //默认起始页码,第1页  
36.                   private var currentPageIndex:uint = 0;  
37.                     
38.                   //是否已初始化  
39.                   private var isInit:Boolean=true;                    
40.                     
41.                   //总页数  
42.                   private var totalPages:uint = 0;  
43.                     
44.                   //是否重绘页码条，当使用服务端分页时使用  
45.                   private var isCreateNavBar:Boolean = true;  
46.                                     
47.                   /************************************************************/  
48.                     
49.                   //显示到Grid的数据  
50.                   [Bindable]  
51.                   public var viewData:ArrayCollection=null;  
52.                     
53.                   //所有的数据  
54.                   public var orgData:ArrayCollection=null;  
55.                     
56.                   //每页记录数下拉框  
57.                   public var pageSizeDropDownListData:ArrayCollection=null;  
58.                     
59.                   // 每页记录数   
60.                   public var pageSize:uint = 5;   
61.                                    
62.                   // 页码条上显示页码的个数  
63.                   public var navSize:uint = 5;  
64.                     
65.                   //记录总数，调用服务端发页时使用  
66.                   public var totalRecord:int=0;  
67.                     
68.                   //分页函数  
69.                   public var pagingFunction:Function=null;  
70.                     
71.                   //分页条对应的Grid  
72.                   public var dataGrid:DataGrid=null;  
73.                     
74.                   /***************************************************************/  
75.                     
76.                   public function dataBind(isServerSide:Boolean=false):void{  
77.                         //是否初始化  
78.                         if(isInit){  
79.                             if(pageSizeDropDownListData==null){  
80.                                 pageSizeDropDownListData = new ArrayCollection();  
81.                                 pageSizeDropDownListData.addItem({label:5,data:5});  
82.                                 pageSizeDropDownListData.addItem({label:10,data:10});  
83.                                 pageSizeDropDownListData.addItem({label:20,data:20});  
84.                                 pageSizeDropDownListData.addItem({label:30,data:30});                             
85.                             }  
86.                             pageSizeComobox.dataProvider=pageSizeDropDownListData;  
87.                             isInit=false;  
88.                         }  
89.                         //                                                                
90.                         refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);  
91.                   }  
92.                     
93.                     
94.                     
95.                   /**  
96.                     * 构建页码条  
97.                     * pages:总页数  
98.                     * pageIndex:当前页（注意，从0开始）  
99.                     *  
100.                    */  
101.                   private function createNavBar(pageIndex:uint = 0):void{  
102.                       nav.removeAll();  
103.                       //向前图标操作,first,Pre  
104.                       if( pageIndex > 1 ){  
105.                             firstPage=0;  
106.                             firstNavBtn.visible=true;  
107.                             //  
108.                             var intLFive:int = pageIndex-navSize; // calculate start of last 5;  
109.                             //  
110.                             prePage=intLFive;  
111.                             preNavBtn.visible=true;  
112.                       }  
113.                       else{  
114.                             firstNavBtn.visible=false;  
115.                             preNavBtn.visible=false;  
116.                       }  
117.                       //页码条          
118.                       for( var x:uint = 0; x < navSize; x++){  
119.                             var pg:uint = x + pageIndex;  
120.                             nav.addItem({label: pg + 1,data: pg});  
121.                             //    
122.                             var pgg:uint = pg+1;  
123.                             if(pgg>=totalPages){ //搜索到最后一个页码，停止添加到navbar  
124.                                 x=navSize;   
125.                             }  
126.                       }  
127.                       //计算最后一组页码条中第一个页码的页码编号  
128.                       var lastpage:Number = 0;  
129.                       for( var y:uint = navSize; y <= totalPages-1;y = y + navSize ){ //lets calculate the lastpage button  
130.                             if(y+5 > navSize){  
131.                                 lastpage = y;  
132.                             }  
133.                       }                     
134.                       //向后图标  
135.                       if( pg < totalPages - 1 ){  
136.                             nextPage=pg + 1;  
137.                             nextNavBtn.visible=true;  
138.                             lastPage=lastpage;  
139.                             lastNavBtn.visible=true;  
140.                       }  
141.                       else{                                
142.                             nextNavBtn.visible=false;  
143.                             lastNavBtn.visible=false;  
144.                       }  
145.                   }  
146.                     
147.                   /**  
148.                   * 页码按钮按下(页码条点击)  
149.                   */   
150.                   private function navigatePage(event:ItemClickEvent):void  
151.                   {  
152.                         refreshDataProvider(event.item.data,false);     
153.                   }  
154.                     
155.                   /**  
156.                   * 页码按钮按下,first,pre,next,last  
157.                   */   
158.                   private function navigateButtonClick(pageString:String):void{  
159.                         var pageIndex:uint=0;  
160.                         switch(pageString){  
161.                             case "firstPage":  
162.                                 pageIndex=firstPage;  
163.                                 break;  
164.                             case "prePage":  
165.                                 pageIndex=prePage;  
166.                                 break;  
167.                             case "nextPage":  
168.                                 pageIndex=nextPage;  
169.                                 break;  
170.                             default:    //lastPage  
171.                                 pageIndex=lastPage;  
172.                         }  
173.                         //  
174.                         refreshDataProvider(pageIndex);  
175.                   }  
176.                     
177.                   /**  
178.                   * 更新数据源,更新表格显示数据  
179.                   */   
180.                   private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void{  
181.                       //分页函数  
182.                       if(dataGrid==null) return;  
183.                       currentPageIndex=pageIndex;  
184.                       if(pageSize==0){  
185.                             pageSize=this.pageSize;   
186.                       }else{  
187.                             this.pageSize=pageSize;  
188.                             if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize);  
189.                       }                     
190.                       if(!resultReturn){                                                                                  
191.                               if(this.pagingFunction!=null){  
192.                                     pagingFunction(pageIndex,pageSize);  
193.                                     this.isCreateNavBar=isCreateNavBar;   
194.                               }  
195.                               else{  
196.                                     viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) );                     
197.                                     dataGrid.dataProvider=viewData;  
198.                                     pageNumber.text=(pageIndex+1).toString();  
199.                                       
200.                                     totalRecordLabel.text = '总记录数：' + orgData.length.toString();                                                            
201.                               }  
202.                       }  
203.                       else{  
204.                             dataGrid.dataProvider=orgData;  
205.                             totalPages = Math.ceil(totalRecord/pageSize);  
206.                             pageNumber.text=(pageIndex+1).toString();  
207.                             totalRecordLabel.text = '总记录数：' + totalRecord.toString()              
208.                       }  
209.                       totalPagesLabel.text = '总页数：' + totalPages;  
210.                       if(isCreateNavBar) createNavBar(pageIndex);  
211.                   }  
212.                   //  
213.                   /**  
214.                   * 每页记录数变更（下拉框选择）  
215.                   */   
216.                   private function pageSizeSelectChange():void{  
217.                         refreshDataProvider(0,true,uint(pageSizeComobox.value));  
218.                   }                  
219.                   /**  
220.                   * 页码变更（直接输入）  
221.                   */   
222.                   private function pageIndexInsertChange(event:Event):void{  
223.                         var keyboardEvent:KeyboardEvent=event as KeyboardEvent;  
224.                         if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER){  
225.                             var pageIndex:uint=uint(pageNumber.text)-1;  
226.                             if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex){  
227.                                 refreshDataProvider(pageIndex);  
228.                             }  
229.                             else{                                 
230.                                 pageNumber.text = (currentPageIndex+1).toString();  
231.                             }  
232.                         }  
233.                   }       
234.                   /**  
235.                   * 查看所有  
236.                   */   
237.                   private function viewAll():void{  
238.                         var tempTotalRecord:uint=0;                 
239.                         if(pagingFunction!=null) tempTotalRecord=totalRecord;  
240.                         else tempTotalRecord=orgData.length;  
241.                         //  
242.                         pageSizeComobox.text=tempTotalRecord.toString();  
243.                         pageSizeComobox.selectedIndex=-1;  
244.                         refreshDataProvider(0,true,tempTotalRecord);  
245.                   }  
246.         ]]>  
247.     </mx:Script>  
248.     <mx:HBox paddingTop="8">  
249.         <mx:Button id="firstNavBtn" icon="{firstIcon}" width="10" height="10" click="navigateButtonClick('firstPage');" />  
250.         <mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="navigateButtonClick('prePage');"/>  
251.     </mx:HBox>  
252.     <mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}"/>  
253.     <mx:HBox paddingTop="8">  
254.         <mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="navigateButtonClick('nextPage');"/>  
255.         <mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="navigateButtonClick('lastPage');"/>  
256.     </mx:HBox>  
257.     <mx:VRule height="25"/>  
258.     <mx:Label paddingTop="3" id="totalPagesLabel" text=""/>  
259.     <mx:Label paddingTop="3" id="totalRecordLabel" text=""/>  
260.     <mx:Label paddingTop="3" text="每页记录:"/>  
261.     <mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/>  
262.     <mx:Label paddingTop="3" text="页码:"/>  
263.     <mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/>  
264.     <mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>                 
265. </mx:HBox>      
266.   

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml" backgroundColor="white">
	<mx:Script>
		<![CDATA[
                  import mx.collections.ArrayCollection;
                  import mx.events.ItemClickEvent;
                  import flash.events.KeyboardEvent;
                  import mx.controls.DataGrid;
                  import mx.validators.NumberValidator;

	      		  [Bindable]
				  [Embed(source='assets/first.jpg')]
				  private var firstIcon:Class;				  
				  private var firstPage:uint; 
				  
	      		  [Bindable]
				  [Embed(source='assets/pre.jpg')]
				  private var preIcon:Class;
				  private var prePage:uint; 
			
	      		  [Bindable]
				  [Embed(source='assets/next.jpg')]
				  private var nextIcon:Class;
				  private var nextPage:uint; 

	      		  [Bindable]
				  [Embed(source='assets/last.jpg')]
				  private var lastIcon:Class;
				  private var lastPage:uint;
                           
                  //页码条数据,绑定
                  [Bindable]
                  private var nav:ArrayCollection = new ArrayCollection();
                  
                  //默认起始页码,第1页
                  private var currentPageIndex:uint = 0;
                  
                  //是否已初始化
                  private var isInit:Boolean=true;                  
  				  
  				  //总页数
				  private var totalPages:uint = 0;
				  
				  //是否重绘页码条，当使用服务端分页时使用
				  private var isCreateNavBar:Boolean = true;
				   				  
				  /************************************************************/
				  
                  //显示到Grid的数据
                  [Bindable]
                  public var viewData:ArrayCollection=null;
                  
                  //所有的数据
                  public var orgData:ArrayCollection=null;
                  
                  //每页记录数下拉框
                  public var pageSizeDropDownListData:ArrayCollection=null;
                  
                  // 每页记录数 
                  public var pageSize:uint = 5; 
				                 
                  // 页码条上显示页码的个数
                  public var navSize:uint = 5;
               	  
               	  //记录总数，调用服务端发页时使用
                  public var totalRecord:int=0;
                  
                  //分页函数
                  public var pagingFunction:Function=null;
                  
                  //分页条对应的Grid
                  public var dataGrid:DataGrid=null;
                  
                  /***************************************************************/
                  
                  public function dataBind(isServerSide:Boolean=false):void{
				        //是否初始化
					    if(isInit){
							if(pageSizeDropDownListData==null){
								pageSizeDropDownListData = new ArrayCollection();
								pageSizeDropDownListData.addItem({label:5,data:5});
								pageSizeDropDownListData.addItem({label:10,data:10});
								pageSizeDropDownListData.addItem({label:20,data:20});
								pageSizeDropDownListData.addItem({label:30,data:30});					        
							}
							pageSizeComobox.dataProvider=pageSizeDropDownListData;
							isInit=false;
					    }
					    //					                        					
					    refreshDataProvider(currentPageIndex,isCreateNavBar,pageSize,isServerSide);
                  }
                  
                  
                  
                  /**
					* 构建页码条
                  	* pages:总页数
                  	* pageIndex:当前页（注意，从0开始）
                  	*
                   */
                  private function createNavBar(pageIndex:uint = 0):void{
                      nav.removeAll();
                      //向前图标操作,first,Pre
                      if( pageIndex > 1 ){
                            firstPage=0;
                            firstNavBtn.visible=true;
                            //
                            var intLFive:int = pageIndex-navSize; // calculate start of last 5;
                            //
                            prePage=intLFive;
                            preNavBtn.visible=true;
                      }
                      else{
                        	firstNavBtn.visible=false;
                        	preNavBtn.visible=false;
                      }
                      //页码条        
                      for( var x:uint = 0; x < navSize; x++){
                            var pg:uint = x + pageIndex;
                            nav.addItem({label: pg + 1,data: pg});
							//	
							var pgg:uint = pg+1;
							if(pgg>=totalPages){ //搜索到最后一个页码，停止添加到navbar
								x=navSize; 
							}
                      }
					  //计算最后一组页码条中第一个页码的页码编号
					  var lastpage:Number = 0;
					  for( var y:uint = navSize; y <= totalPages-1;y = y + navSize ){ //lets calculate the lastpage button
						  	if(y+5 > navSize){
						  		lastpage = y;
						  	}
					  }					  
					  //向后图标
                      if( pg < totalPages - 1 ){
                            nextPage=pg + 1;
                            nextNavBtn.visible=true;
                            lastPage=lastpage;
                      		lastNavBtn.visible=true;
                      }
                      else{                              
                      		nextNavBtn.visible=false;
                      		lastNavBtn.visible=false;
                      }
                  }
                  
                  /**
                  * 页码按钮按下(页码条点击)
                  */ 
                  private function navigatePage(event:ItemClickEvent):void
                  {
                        refreshDataProvider(event.item.data,false);   
                  }
                  
                  /**
                  * 页码按钮按下,first,pre,next,last
                  */ 
                  private function navigateButtonClick(pageString:String):void{
                  		var pageIndex:uint=0;
                  		switch(pageString){
                  			case "firstPage":
                  				pageIndex=firstPage;
                  				break;
                  			case "prePage":
                  				pageIndex=prePage;
                  				break;
                  			case "nextPage":
                  				pageIndex=nextPage;
                  				break;
                  			default:	//lastPage
                  				pageIndex=lastPage;
                  		}
                  		//
                  		refreshDataProvider(pageIndex);
                  }
                  
                  /**
                  * 更新数据源,更新表格显示数据
                  */ 
                  private function refreshDataProvider(pageIndex:uint,isCreateNavBar:Boolean=true,pageSize:uint=0,resultReturn:Boolean=false):void{
	                  //分页函数
	                  if(dataGrid==null) return;
	                  currentPageIndex=pageIndex;
			          if(pageSize==0){
			          		pageSize=this.pageSize;	
			          }else{
			          		this.pageSize=pageSize;
			         		if(!resultReturn) totalPages = Math.ceil(orgData.length/pageSize);
			          }	                  
	                  if(!resultReturn){	                  		  			             		                  	
			                  if(this.pagingFunction!=null){
									pagingFunction(pageIndex,pageSize);
									this.isCreateNavBar=isCreateNavBar;	
			                  }
			                  else{
			                  		viewData = new ArrayCollection( orgData.source.slice((pageIndex * pageSize),(pageIndex * pageSize) + pageSize) );                  	
			                  		dataGrid.dataProvider=viewData;
			                  		pageNumber.text=(pageIndex+1).toString();
			               	  		
			              	  		totalRecordLabel.text = '总记录数：' + orgData.length.toString();				              	  		                  
			                  }
	                  }
	                  else{
	                  		dataGrid.dataProvider=orgData;
	                  		totalPages = Math.ceil(totalRecord/pageSize);
	                  		pageNumber.text=(pageIndex+1).toString();
	                  		totalRecordLabel.text = '总记录数：' + totalRecord.toString()			
	                  }
	                  totalPagesLabel.text = '总页数：' + totalPages;
	                  if(isCreateNavBar) createNavBar(pageIndex);
                  }
                  //
                  /**
                  * 每页记录数变更（下拉框选择）
                  */ 
                  private function pageSizeSelectChange():void{
                  		refreshDataProvider(0,true,uint(pageSizeComobox.value));
                  }                
                  /**
                  * 页码变更（直接输入）
                  */ 
                  private function pageIndexInsertChange(event:Event):void{
                  		var keyboardEvent:KeyboardEvent=event as KeyboardEvent;
                  		if(keyboardEvent!=null&&keyboardEvent.keyCode== Keyboard.ENTER){
                  			var pageIndex:uint=uint(pageNumber.text)-1;
                  			if(pageIndex>0&&pageIndex<totalPages&&pageIndex!=currentPageIndex){
                   				refreshDataProvider(pageIndex);
                   			}
                   			else{                				
                   				pageNumber.text = (currentPageIndex+1).toString();
                   			}
                  		}
                  }     
                  /**
                  * 查看所有
                  */ 
                  private function viewAll():void{
                  		var tempTotalRecord:uint=0;               
						if(pagingFunction!=null) tempTotalRecord=totalRecord;
						else tempTotalRecord=orgData.length;
						//
						pageSizeComobox.text=tempTotalRecord.toString();
						pageSizeComobox.selectedIndex=-1;
						refreshDataProvider(0,true,tempTotalRecord);
                  }
		]]>
	</mx:Script>
    <mx:HBox paddingTop="8">
		<mx:Button id="firstNavBtn" icon="{firstIcon}" width="10" height="10" click="navigateButtonClick('firstPage');" />
	    <mx:Button id="preNavBtn" icon="{preIcon}" width="7" height="10" click="navigateButtonClick('prePage');"/>
	</mx:HBox>
	<mx:LinkBar id="pageNav" itemClick="navigatePage(event)" dataProvider="{nav}"/>
	<mx:HBox paddingTop="8">
	    <mx:Button id="nextNavBtn" icon="{nextIcon}" width="7" height="10" click="navigateButtonClick('nextPage');"/>
	    <mx:Button id="lastNavBtn" icon="{lastIcon}" width="10" height="10" click="navigateButtonClick('lastPage');"/>
	</mx:HBox>
	<mx:VRule height="25"/>
	<mx:Label paddingTop="3" id="totalPagesLabel" text=""/>
	<mx:Label paddingTop="3" id="totalRecordLabel" text=""/>
	<mx:Label paddingTop="3" text="每页记录:"/>
	<mx:ComboBox id="pageSizeComobox" cornerRadius="0" paddingLeft="0" fontWeight="normal" width="50" arrowButtonWidth="10" change="pageSizeSelectChange()"/>
	<mx:Label paddingTop="3" text="页码:"/>
	<mx:TextInput id="pageNumber" width="40" keyDown="pageIndexInsertChange(event);"/>
	<mx:LinkButton id="viewAllLinkBtn" label="查看所有" click="viewAll();"/>	            
</mx:HBox>   

 

 

 

第一：  HTTPService获取服务器端数据显示DataGrid

         HTTPService的方式一

         mxml内容

     

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
3.                xmlns:s="library://ns.adobe.com/flex/spark"    
4.                xmlns:mx="library://ns.adobe.com/flex/mx"  
5.                xmlns:control="com.control.*"    
6.                creationComplete="creationCompleteHandle();myservice.send()"  
7.                minWidth="955" minHeight="600">  
8.     <fx:Style>  
9.         Application{   
10.             fontSize:12;   
11.         }   
12.     </fx:Style>  
13.     <fx:Declarations>  
14.         <!-- 将非可视元素（例如服务、值对象）放在此处 这个HTTPService使用时一定要提前调用send方法-->  
15.         <s:HTTPService id="myservice" url="http://localhost:8080/ClientServerDataGrid/find.do" result="myservice_resultHandler(event)" />  
16.     </fx:Declarations>  
17.        
18.     <fx:Script>  
19.         <![CDATA[  
20.             import com.adobe.serialization.json.JSON;  
21.               
22.             import mx.collections.ArrayCollection;  
23.             import mx.controls.Alert;  
24.             import mx.rpc.events.FaultEvent;  
25.             import mx.rpc.events.ResultEvent;  
26.               
27.             private var pageIndex:int=0;  
28.               
29.             private var pageSize:int=5;  
30.               
31.             private function creationCompleteHandle():void{  
32.                 var orgData:ArrayCollection = new ArrayCollection();  
33.                 for( var x:uint = 1; x <= 555; x++ )  
34.                 {  
35.                     var obj:Object = new Object();  
36.                     obj.ID = "id " + x.toString();  
37.                     obj.Code="order "+x;  
38.                     obj.Total=x*1000;  
39.                     obj.Customer= "customer "+x;  
40.                     obj.Register = "employee";  
41.                     obj.Memo="memo "+x;                   
42.                     obj.State="auditing state";                   
43.                     orgData.addItem(obj);  
44.                 }  
45.                 clientPagingBar1.dataGrid=DataGrid1;  
46.                 clientPagingBar1.orgData=orgData;  
47.                 clientPagingBar1.dataBind();  
48.                   
49.                   
50.             }  
51.               
52.           
53.               
54.               
55.              protected function myservice_resultHandler(event:ResultEvent):void  
56.             {  
57.             var rawData:String = String(event.result);    
58.             //decode the data to ActionScript using the JSON API    
59.             //in this case, the JSON data is a serialize Array of Objects.  
60.               
61.             var arr:Array = (JSON.decode(rawData) as Array);    
62.             var dataArray:ArrayCollection = new ArrayCollection(arr);   
63.             //Alert.show(dataArray.getItemAt(0).id);  
64.             clientPagingBar2.dataGrid=DataGrid2;  
65.             clientPagingBar2.orgData=dataArray;  
66.             clientPagingBar2.dataBind();  
67.             }   
68.               
69.         ]]>  
70.     </fx:Script>  
71.        
72.     <mx:VBox>        
73.         <mx:Label text="客户端分页" />  
74.         <mx:Canvas backgroundColor="white">  
75.             <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">  
76.                 <mx:DataGrid id="DataGrid1" verticalScrollPolicy="on" horizontalScrollPolicy="off">  
77.                     <mx:columns>  
78.                         <mx:DataGridColumn headerText="订单ID" dataField="ID" />  
79.                         <mx:DataGridColumn headerText="订单编码" dataField="Code" />  
80.                         <mx:DataGridColumn headerText="金额" dataField="Total" />  
81.                         <mx:DataGridColumn headerText="客户" dataField="Customer" />  
82.                         <mx:DataGridColumn headerText="销售员" dataField="Register" />  
83.                         <mx:DataGridColumn headerText="备注说明" dataField="Memo" />  
84.                         <mx:DataGridColumn headerText="状态" dataField="State" />                  
85.                     </mx:columns>  
86.                 </mx:DataGrid>  
87.                 <control:PagingBar id="clientPagingBar1" />  
88.             </mx:VBox>  
89.         </mx:Canvas>  
90.            
91.         <mx:Label text="服务器端分页" />  
92.         <mx:Canvas backgroundColor="white">  
93.             <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">  
94.                 <mx:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="off">  
95.                     <mx:columns>  
96.                         <mx:DataGridColumn headerText="订单ID" dataField="id" />  
97.                         <mx:DataGridColumn headerText="订单编码" dataField="code" />  
98.                         <mx:DataGridColumn headerText="金额" dataField="total" />  
99.                         <mx:DataGridColumn headerText="客户" dataField="customer" />  
100.                         <mx:DataGridColumn headerText="销售员" dataField="register" />  
101.                         <mx:DataGridColumn headerText="备注说明" dataField="memo" />  
102.                         <mx:DataGridColumn headerText="状态" dataField="state" />                  
103.                     </mx:columns>  
104.                 </mx:DataGrid>  
105.                 <control:PagingBar id="clientPagingBar2" />  
106.             </mx:VBox>  
107.         </mx:Canvas>  
108.     </mx:VBox>  
109.        
110. </s:Application>  
111.   

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:control="com.control.*" 
			   creationComplete="creationCompleteHandle();myservice.send()"
			   minWidth="955" minHeight="600">
	<fx:Style>
		Application{
			fontSize:12;
		}
	</fx:Style>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 这个HTTPService使用时一定要提前调用send方法-->
		<s:HTTPService id="myservice" url="http://localhost:8080/ClientServerDataGrid/find.do" result="myservice_resultHandler(event)" />
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import com.adobe.serialization.json.JSON;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			private var pageIndex:int=0;
			
			private var pageSize:int=5;
			
			private function creationCompleteHandle():void{
				var orgData:ArrayCollection = new ArrayCollection();
				for( var x:uint = 1; x <= 555; x++ )
				{
					var obj:Object = new Object();
					obj.ID = "id " + x.toString();
					obj.Code="order "+x;
					obj.Total=x*1000;
					obj.Customer= "customer "+x;
					obj.Register = "employee";
					obj.Memo="memo "+x;	            	
					obj.State="auditing state";	            	
					orgData.addItem(obj);
				}
				clientPagingBar1.dataGrid=DataGrid1;
				clientPagingBar1.orgData=orgData;
				clientPagingBar1.dataBind();
				
				
			}
			
		
			
			
			 protected function myservice_resultHandler(event:ResultEvent):void
			{
			var rawData:String = String(event.result);  
			//decode the data to ActionScript using the JSON API  
			//in this case, the JSON data is a serialize Array of Objects.
			
			var arr:Array = (JSON.decode(rawData) as Array);  
			var dataArray:ArrayCollection = new ArrayCollection(arr); 
			//Alert.show(dataArray.getItemAt(0).id);
			clientPagingBar2.dataGrid=DataGrid2;
			clientPagingBar2.orgData=dataArray;
			clientPagingBar2.dataBind();
			} 
			
		]]>
	</fx:Script>
	
	<mx:VBox>		
		<mx:Label text="客户端分页" />
		<mx:Canvas backgroundColor="white">
			<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
				<mx:DataGrid id="DataGrid1" verticalScrollPolicy="on" horizontalScrollPolicy="off">
					<mx:columns>
						<mx:DataGridColumn headerText="订单ID" dataField="ID" />
						<mx:DataGridColumn headerText="订单编码" dataField="Code" />
						<mx:DataGridColumn headerText="金额" dataField="Total" />
						<mx:DataGridColumn headerText="客户" dataField="Customer" />
						<mx:DataGridColumn headerText="销售员" dataField="Register" />
						<mx:DataGridColumn headerText="备注说明" dataField="Memo" />
						<mx:DataGridColumn headerText="状态" dataField="State" />		    	
					</mx:columns>
				</mx:DataGrid>
				<control:PagingBar id="clientPagingBar1" />
			</mx:VBox>
		</mx:Canvas>
		
		<mx:Label text="服务器端分页" />
		<mx:Canvas backgroundColor="white">
			<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
				<mx:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="off">
					<mx:columns>
						<mx:DataGridColumn headerText="订单ID" dataField="id" />
						<mx:DataGridColumn headerText="订单编码" dataField="code" />
						<mx:DataGridColumn headerText="金额" dataField="total" />
						<mx:DataGridColumn headerText="客户" dataField="customer" />
						<mx:DataGridColumn headerText="销售员" dataField="register" />
						<mx:DataGridColumn headerText="备注说明" dataField="memo" />
						<mx:DataGridColumn headerText="状态" dataField="state" />		    	
					</mx:columns>
				</mx:DataGrid>
				<control:PagingBar id="clientPagingBar2" />
			</mx:VBox>
		</mx:Canvas>
	</mx:VBox>
	
</s:Application>

 

     HTTPService的方式二

  

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
3.                xmlns:s="library://ns.adobe.com/flex/spark"    
4.                xmlns:mx="library://ns.adobe.com/flex/mx"  
5.                xmlns:control="com.control.*"    
6.                creationComplete="creationCompleteHandle()"  
7.                minWidth="955" minHeight="600">  
8.     <fx:Style>  
9.         Application{   
10.             fontSize:12;   
11.         }   
12.     </fx:Style>  
13.     <fx:Declarations>  
14.         <!-- 将非可视元素（例如服务、值对象）放在此处 这个HTTPService使用时一定要提前调用send方法-->  
15.         <s:HTTPService id="myservice"  />  
16.     </fx:Declarations>  
17.        
18.     <fx:Script>  
19.         <![CDATA[  
20.             import com.adobe.serialization.json.JSON;  
21.               
22.             import mx.collections.ArrayCollection;  
23.             import mx.controls.Alert;  
24.             import mx.rpc.events.FaultEvent;  
25.             import mx.rpc.events.ResultEvent;  
26.             import mx.utils.URLUtil;  
27.               
28.             private var pageIndex:int=0;  
29.               
30.             private var pageSize:int=5;  
31.               
32.             private function creationCompleteHandle():void{  
33.                 var orgData:ArrayCollection = new ArrayCollection();  
34.                 for( var x:uint = 1; x <= 555; x++ )  
35.                 {  
36.                     var obj:Object = new Object();  
37.                     obj.ID = "id " + x.toString();  
38.                     obj.Code="order "+x;  
39.                     obj.Total=x*1000;  
40.                     obj.Customer= "customer "+x;  
41.                     obj.Register = "employee";  
42.                     obj.Memo="memo "+x;                   
43.                     obj.State="auditing state";                   
44.                     orgData.addItem(obj);  
45.                 }  
46.                 clientPagingBar1.dataGrid=DataGrid1;  
47.                 clientPagingBar1.orgData=orgData;  
48.                 clientPagingBar1.dataBind();  
49.                   
50.                 myservice.url="http://localhost:8080/ClientServerDataGrid/find.do";  
51.                 myservice.showBusyCursor=true;  
52.                 myservice.send();  
53.                 myservice.addEventListener(ResultEvent.RESULT,hsResultHandler);   
54.                 myservice.addEventListener(FaultEvent.FAULT,hsFaultHandler);   
55.             }  
56.             private function hsResultHandler(event:ResultEvent):void{     
57.                 var rawData:String = String(event.result);    
58.                 //decode the data to ActionScript using the JSON API    
59.                 //in this case, the JSON data is a serialize Array of Objects.  
60.                   
61.                 var arr:Array = (JSON.decode(rawData) as Array);    
62.                 var dataArray:ArrayCollection = new ArrayCollection(arr);   
63.                 //Alert.show(dataArray.getItemAt(0).id);  
64.                 clientPagingBar2.dataGrid=DataGrid2;  
65.                 clientPagingBar2.orgData=dataArray;  
66.                 clientPagingBar2.dataBind();  
67.             }     
68.             private function hsFaultHandler(e:FaultEvent):void{     
69.                 Alert.show(e.fault.toString(),'http请求错误');     
70.             }     
71.               
72.               
73.               
74.         ]]>  
75.     </fx:Script>  
76.        
77.     <mx:VBox>        
78.         <mx:Label text="客户端分页" />  
79.         <mx:Canvas backgroundColor="white">  
80.             <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">  
81.                 <mx:DataGrid id="DataGrid1" verticalScrollPolicy="on" horizontalScrollPolicy="off">  
82.                     <mx:columns>  
83.                         <mx:DataGridColumn headerText="订单ID" dataField="ID" />  
84.                         <mx:DataGridColumn headerText="订单编码" dataField="Code" />  
85.                         <mx:DataGridColumn headerText="金额" dataField="Total" />  
86.                         <mx:DataGridColumn headerText="客户" dataField="Customer" />  
87.                         <mx:DataGridColumn headerText="销售员" dataField="Register" />  
88.                         <mx:DataGridColumn headerText="备注说明" dataField="Memo" />  
89.                         <mx:DataGridColumn headerText="状态" dataField="State" />                  
90.                     </mx:columns>  
91.                 </mx:DataGrid>  
92.                 <control:PagingBar id="clientPagingBar1" />  
93.             </mx:VBox>  
94.         </mx:Canvas>  
95.            
96.         <mx:Label text="服务器端分页" />  
97.         <mx:Canvas backgroundColor="white">  
98.             <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">  
99.                 <mx:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="off">  
100.                     <mx:columns>  
101.                         <mx:DataGridColumn headerText="订单ID" dataField="id" />  
102.                         <mx:DataGridColumn headerText="订单编码" dataField="code" />  
103.                         <mx:DataGridColumn headerText="金额" dataField="total" />  
104.                         <mx:DataGridColumn headerText="客户" dataField="customer" />  
105.                         <mx:DataGridColumn headerText="销售员" dataField="register" />  
106.                         <mx:DataGridColumn headerText="备注说明" dataField="memo" />  
107.                         <mx:DataGridColumn headerText="状态" dataField="state" />                  
108.                     </mx:columns>  
109.                 </mx:DataGrid>  
110.                 <control:PagingBar id="clientPagingBar2" />  
111.             </mx:VBox>  
112.         </mx:Canvas>  
113.     </mx:VBox>  
114.        
115. </s:Application>  
116.  

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:control="com.control.*" 
			   creationComplete="creationCompleteHandle()"
			   minWidth="955" minHeight="600">
	<fx:Style>
		Application{
			fontSize:12;
		}
	</fx:Style>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 这个HTTPService使用时一定要提前调用send方法-->
		<s:HTTPService id="myservice"  />
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import com.adobe.serialization.json.JSON;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.utils.URLUtil;
			
			private var pageIndex:int=0;
			
			private var pageSize:int=5;
			
			private function creationCompleteHandle():void{
				var orgData:ArrayCollection = new ArrayCollection();
				for( var x:uint = 1; x <= 555; x++ )
				{
					var obj:Object = new Object();
					obj.ID = "id " + x.toString();
					obj.Code="order "+x;
					obj.Total=x*1000;
					obj.Customer= "customer "+x;
					obj.Register = "employee";
					obj.Memo="memo "+x;	            	
					obj.State="auditing state";	            	
					orgData.addItem(obj);
				}
				clientPagingBar1.dataGrid=DataGrid1;
				clientPagingBar1.orgData=orgData;
				clientPagingBar1.dataBind();
				
				myservice.url="http://localhost:8080/ClientServerDataGrid/find.do";
				myservice.showBusyCursor=true;
				myservice.send();
				myservice.addEventListener(ResultEvent.RESULT,hsResultHandler); 
				myservice.addEventListener(FaultEvent.FAULT,hsFaultHandler); 
			}
			private function hsResultHandler(event:ResultEvent):void{   
				var rawData:String = String(event.result);  
				//decode the data to ActionScript using the JSON API  
				//in this case, the JSON data is a serialize Array of Objects.
				
				var arr:Array = (JSON.decode(rawData) as Array);  
				var dataArray:ArrayCollection = new ArrayCollection(arr); 
				//Alert.show(dataArray.getItemAt(0).id);
				clientPagingBar2.dataGrid=DataGrid2;
				clientPagingBar2.orgData=dataArray;
				clientPagingBar2.dataBind();
			}   
			private function hsFaultHandler(e:FaultEvent):void{   
				Alert.show(e.fault.toString(),'http请求错误');   
			}   
			
			
			
		]]>
	</fx:Script>
	
	<mx:VBox>		
		<mx:Label text="客户端分页" />
		<mx:Canvas backgroundColor="white">
			<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
				<mx:DataGrid id="DataGrid1" verticalScrollPolicy="on" horizontalScrollPolicy="off">
					<mx:columns>
						<mx:DataGridColumn headerText="订单ID" dataField="ID" />
						<mx:DataGridColumn headerText="订单编码" dataField="Code" />
						<mx:DataGridColumn headerText="金额" dataField="Total" />
						<mx:DataGridColumn headerText="客户" dataField="Customer" />
						<mx:DataGridColumn headerText="销售员" dataField="Register" />
						<mx:DataGridColumn headerText="备注说明" dataField="Memo" />
						<mx:DataGridColumn headerText="状态" dataField="State" />		    	
					</mx:columns>
				</mx:DataGrid>
				<control:PagingBar id="clientPagingBar1" />
			</mx:VBox>
		</mx:Canvas>
		
		<mx:Label text="服务器端分页" />
		<mx:Canvas backgroundColor="white">
			<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
				<mx:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="off">
					<mx:columns>
						<mx:DataGridColumn headerText="订单ID" dataField="id" />
						<mx:DataGridColumn headerText="订单编码" dataField="code" />
						<mx:DataGridColumn headerText="金额" dataField="total" />
						<mx:DataGridColumn headerText="客户" dataField="customer" />
						<mx:DataGridColumn headerText="销售员" dataField="register" />
						<mx:DataGridColumn headerText="备注说明" dataField="memo" />
						<mx:DataGridColumn headerText="状态" dataField="state" />		    	
					</mx:columns>
				</mx:DataGrid>
				<control:PagingBar id="clientPagingBar2" />
			</mx:VBox>
		</mx:Canvas>
	</mx:VBox>
	
</s:Application>

第二：URLRequest方式获取

  mxml内容

   

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
3.                xmlns:s="library://ns.adobe.com/flex/spark"    
4.                xmlns:mx="library://ns.adobe.com/flex/mx"  
5.                xmlns:control="com.control.*"    
6.                creationComplete="creationCompleteHandle()"  
7.                minWidth="955" minHeight="600">  
8.     <fx:Style>  
9.         Application{   
10.             fontSize:12;   
11.         }   
12.     </fx:Style>  
13.     <fx:Declarations>  
14.         <!-- 将非可视元素（例如服务、值对象）放在此处 这个HTTPService使用时一定要提前调用send方法-->  
15.     </fx:Declarations>  
16.        
17.     <fx:Script>  
18.         <![CDATA[  
19.             import com.adobe.serialization.json.JSON;  
20.               
21.             import mx.collections.ArrayCollection;  
22.             import mx.controls.Alert;  
23.             import mx.rpc.events.FaultEvent;  
24.             import mx.rpc.events.ResultEvent;  
25.             import mx.utils.URLUtil;  
26.               
27.             private var pageIndex:int=0;  
28.               
29.             private var pageSize:int=5;  
30.               
31.             private function creationCompleteHandle():void{  
32.                 var orgData:ArrayCollection = new ArrayCollection();  
33.                 for( var x:uint = 1; x <= 555; x++ )  
34.                 {  
35.                     var obj:Object = new Object();  
36.                     obj.ID = "id " + x.toString();  
37.                     obj.Code="order "+x;  
38.                     obj.Total=x*1000;  
39.                     obj.Customer= "customer "+x;  
40.                     obj.Register = "employee";  
41.                     obj.Memo="memo "+x;                   
42.                     obj.State="auditing state";                   
43.                     orgData.addItem(obj);  
44.                 }  
45.                 clientPagingBar1.dataGrid=DataGrid1;  
46.                 clientPagingBar1.orgData=orgData;  
47.                 clientPagingBar1.dataBind();  
48.                   
49.                   
50.                   
51.                   
52.                 //var v:URLVariables = new URLVariables("name=jacky&age=35&address=HongKong China");    
53.                 /*   
54.                 也可以是这种方式  
55.                 var vars: URLVariables = new URLVariables ();  
56.                 vars["varName"] = varValue; //把参数键,值对放到vars对象中.  
57.                 vars["var2Name"] = var2Value;   
58.                 */    
59.                 var r:URLRequest = new URLRequest();    
60.                 r.url ="http://localhost:8080/ClientServerDataGrid/find.do";    
61.                 r.method = URLRequestMethod.POST;    
62.                 //r.data = v;    
63.                   
64.                 var l:URLLoader = new URLLoader();            
65.                 l.load(r);    
66.                   
67.                 l.addEventListener(Event.COMPLETE,txtCompleteHandler); //注册请求完成后 响应获取数据事件方法   
68.             }  
69.             private function txtCompleteHandler(e:Event):void    
70.             {    
71.                   
72.                 var l:URLLoader = URLLoader(e.target);    
73.                 /* URLUtil的stringToObject方法解释  
74.                 从字符串返回对象。字符串包含 name=value 对，它们成为返回对象的动态属性。这些属性对由指定的 separator 分隔。该方法可转换数字、布尔值、数组（由“[]”定义）以及子类（由“{}”定义）。默认情况下，%XX 格式的 URL 模式将转换为相应的字符串字符。   
75.                 例如：   
76.                 var s:String = "name=Alex;age=21";  
77.                 var o:Object = URLUtil.stringToObject(s, ";", true);          
78.                 返回对象：{ name: "Alex", age: 21 }。  
79.                 */  
80.                 //直接获取返回值内容:  URLLoader(e.target).data  
81.                 //              Alert.show(l.data);  
82.                 //              var o:Object = URLUtil.stringToObject(l.data,";",true); //使用URLUtil对将数据进行反序列化以方便使用    
83.                   
84.                   
85.                 var rawData:String = String(l.data);    
86.                 //decode the data to ActionScript using the JSON API    
87.                 //in this case, the JSON data is a serialize Array of Objects.  
88.                   
89.                 var arr:Array = (JSON.decode(rawData) as Array);    
90.                 var dataArray:ArrayCollection = new ArrayCollection(arr);   
91.                 //Alert.show(dataArray.getItemAt(0).id);  
92.                 clientPagingBar2.dataGrid=DataGrid2;  
93.                 clientPagingBar2.orgData=dataArray;  
94.                 clientPagingBar2.dataBind();  
95.             }    
96.               
97.               
98.         ]]>  
99.     </fx:Script>  
100.        
101.     <mx:VBox>        
102.         <mx:Label text="客户端分页" />  
103.         <mx:Canvas backgroundColor="white">  
104.             <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">  
105.                 <mx:DataGrid id="DataGrid1" verticalScrollPolicy="on" horizontalScrollPolicy="off">  
106.                     <mx:columns>  
107.                         <mx:DataGridColumn headerText="订单ID" dataField="ID" />  
108.                         <mx:DataGridColumn headerText="订单编码" dataField="Code" />  
109.                         <mx:DataGridColumn headerText="金额" dataField="Total" />  
110.                         <mx:DataGridColumn headerText="客户" dataField="Customer" />  
111.                         <mx:DataGridColumn headerText="销售员" dataField="Register" />  
112.                         <mx:DataGridColumn headerText="备注说明" dataField="Memo" />  
113.                         <mx:DataGridColumn headerText="状态" dataField="State" />                  
114.                     </mx:columns>  
115.                 </mx:DataGrid>  
116.                 <control:PagingBar id="clientPagingBar1" />  
117.             </mx:VBox>  
118.         </mx:Canvas>  
119.            
120.         <mx:Label text="服务器端分页" />  
121.         <mx:Canvas backgroundColor="white">  
122.             <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">  
123.                 <mx:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="off">  
124.                     <mx:columns>  
125.                         <mx:DataGridColumn headerText="订单ID" dataField="id" />  
126.                         <mx:DataGridColumn headerText="订单编码" dataField="code" />  
127.                         <mx:DataGridColumn headerText="金额" dataField="total" />  
128.                         <mx:DataGridColumn headerText="客户" dataField="customer" />  
129.                         <mx:DataGridColumn headerText="销售员" dataField="register" />  
130.                         <mx:DataGridColumn headerText="备注说明" dataField="memo" />  
131.                         <mx:DataGridColumn headerText="状态" dataField="state" />                  
132.                     </mx:columns>  
133.                 </mx:DataGrid>  
134.                 <control:PagingBar id="clientPagingBar2" />  
135.             </mx:VBox>  
136.         </mx:Canvas>  
137.     </mx:VBox>  
138.        
139. </s:Application>  
140.  

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:control="com.control.*" 
			   creationComplete="creationCompleteHandle()"
			   minWidth="955" minHeight="600">
	<fx:Style>
		Application{
			fontSize:12;
		}
	</fx:Style>
	<fx:Declarations>
		<!-- 将非可视元素（例如服务、值对象）放在此处 这个HTTPService使用时一定要提前调用send方法-->
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import com.adobe.serialization.json.JSON;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			import mx.utils.URLUtil;
			
			private var pageIndex:int=0;
			
			private var pageSize:int=5;
			
			private function creationCompleteHandle():void{
				var orgData:ArrayCollection = new ArrayCollection();
				for( var x:uint = 1; x <= 555; x++ )
				{
					var obj:Object = new Object();
					obj.ID = "id " + x.toString();
					obj.Code="order "+x;
					obj.Total=x*1000;
					obj.Customer= "customer "+x;
					obj.Register = "employee";
					obj.Memo="memo "+x;	            	
					obj.State="auditing state";	            	
					orgData.addItem(obj);
				}
				clientPagingBar1.dataGrid=DataGrid1;
				clientPagingBar1.orgData=orgData;
				clientPagingBar1.dataBind();
				
				
				
				
				//var v:URLVariables = new URLVariables("name=jacky&age=35&address=HongKong China");  
				/* 
				也可以是这种方式
				var vars: URLVariables = new URLVariables ();
				vars["varName"] = varValue;	//把参数键,值对放到vars对象中.
				vars["var2Name"] = var2Value; 
				*/	
				var r:URLRequest = new URLRequest();  
				r.url ="http://localhost:8080/ClientServerDataGrid/find.do";  
				r.method = URLRequestMethod.POST;  
				//r.data = v;  
				
				var l:URLLoader = new URLLoader();  		
				l.load(r);  
				
				l.addEventListener(Event.COMPLETE,txtCompleteHandler); //注册请求完成后 响应获取数据事件方法 
			}
			private function txtCompleteHandler(e:Event):void  
			{  
				
				var l:URLLoader = URLLoader(e.target);  
				/* URLUtil的stringToObject方法解释
				从字符串返回对象。字符串包含 name=value 对，它们成为返回对象的动态属性。这些属性对由指定的 separator 分隔。该方法可转换数字、布尔值、数组（由“[]”定义）以及子类（由“{}”定义）。默认情况下，%XX 格式的 URL 模式将转换为相应的字符串字符。 
				例如： 
				var s:String = "name=Alex;age=21";
				var o:Object = URLUtil.stringToObject(s, ";", true);		
				返回对象：{ name: "Alex", age: 21 }。
				*/
				//直接获取返回值内容:  URLLoader(e.target).data
				//				Alert.show(l.data);
				//				var o:Object = URLUtil.stringToObject(l.data,";",true); //使用URLUtil对将数据进行反序列化以方便使用  
				
				
				var rawData:String = String(l.data);  
				//decode the data to ActionScript using the JSON API  
				//in this case, the JSON data is a serialize Array of Objects.
				
				var arr:Array = (JSON.decode(rawData) as Array);  
				var dataArray:ArrayCollection = new ArrayCollection(arr); 
				//Alert.show(dataArray.getItemAt(0).id);
				clientPagingBar2.dataGrid=DataGrid2;
				clientPagingBar2.orgData=dataArray;
				clientPagingBar2.dataBind();
			}  
			
			
		]]>
	</fx:Script>
	
	<mx:VBox>		
		<mx:Label text="客户端分页" />
		<mx:Canvas backgroundColor="white">
			<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
				<mx:DataGrid id="DataGrid1" verticalScrollPolicy="on" horizontalScrollPolicy="off">
					<mx:columns>
						<mx:DataGridColumn headerText="订单ID" dataField="ID" />
						<mx:DataGridColumn headerText="订单编码" dataField="Code" />
						<mx:DataGridColumn headerText="金额" dataField="Total" />
						<mx:DataGridColumn headerText="客户" dataField="Customer" />
						<mx:DataGridColumn headerText="销售员" dataField="Register" />
						<mx:DataGridColumn headerText="备注说明" dataField="Memo" />
						<mx:DataGridColumn headerText="状态" dataField="State" />		    	
					</mx:columns>
				</mx:DataGrid>
				<control:PagingBar id="clientPagingBar1" />
			</mx:VBox>
		</mx:Canvas>
		
		<mx:Label text="服务器端分页" />
		<mx:Canvas backgroundColor="white">
			<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
				<mx:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="off">
					<mx:columns>
						<mx:DataGridColumn headerText="订单ID" dataField="id" />
						<mx:DataGridColumn headerText="订单编码" dataField="code" />
						<mx:DataGridColumn headerText="金额" dataField="total" />
						<mx:DataGridColumn headerText="客户" dataField="customer" />
						<mx:DataGridColumn headerText="销售员" dataField="register" />
						<mx:DataGridColumn headerText="备注说明" dataField="memo" />
						<mx:DataGridColumn headerText="状态" dataField="state" />		    	
					</mx:columns>
				</mx:DataGrid>
				<control:PagingBar id="clientPagingBar2" />
			</mx:VBox>
		</mx:Canvas>
	</mx:VBox>
	
</s:Application>

 

针对上面两种方式的servlet处理类为

  

Java代码  

1. package com.test;   
2.   
3. import java.io.IOException;   
4. import java.io.PrintWriter;   
5. import java.util.ArrayList;   
6. import java.util.List;   
7.   
8. import javax.servlet.ServletException;   
9. import javax.servlet.http.HttpServlet;   
10. import javax.servlet.http.HttpServletRequest;   
11. import javax.servlet.http.HttpServletResponse;   
12.   
13. import net.sf.json.JSONArray;   
14.   
15. public class FindDataServlet extends HttpServlet {   
16.   
17.        
18.     public void doGet(HttpServletRequest request, HttpServletResponse response)   
19.             throws ServletException, IOException {   
20.              this.doPost(request, response);   
21.     }   
22.   
23.     public void doPost(HttpServletRequest request, HttpServletResponse response)   
24.             throws ServletException, IOException {   
25.         System.out.println("执行Servlet了哦。。。。。。。。。。。。");   
26.         List<MyObject> orgData=new ArrayList<MyObject>();   
27.         for(int x= 1; x <= 555; x++ )   
28.         {   
29.             MyObject ob=new MyObject();   
30.             ob.setId("CHENEY"+x);   
31.             ob.setCode("HENAN"+x);   
32.             ob.setTotal(x*10);   
33.             ob.setCustomer("CUS"+x);   
34.             ob.setRegister("EMP"+x);   
35.             ob.setMemo("MEMO"+x);   
36.             ob.setState("STATE"+x);   
37.             orgData.add(ob);   
38.         }   
39.        JSONArray json=JSONArray.fromObject(orgData);   
40.        String datas=json.toString();   
41.        System.out.println(datas);   
42.        response.getWriter().write(datas);   
43.     }   
44.   
45. }   

package com.test;

import java.io.IOException;
import java.io.PrintWriter;
import java.util.ArrayList;
import java.util.List;

import javax.servlet.ServletException;
import javax.servlet.http.HttpServlet;
import javax.servlet.http.HttpServletRequest;
import javax.servlet.http.HttpServletResponse;

import net.sf.json.JSONArray;

public class FindDataServlet extends HttpServlet {

	
	public void doGet(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
             this.doPost(request, response);
	}

	public void doPost(HttpServletRequest request, HttpServletResponse response)
			throws ServletException, IOException {
		System.out.println("执行Servlet了哦。。。。。。。。。。。。");
		List<MyObject> orgData=new ArrayList<MyObject>();
		for(int x= 1; x <= 555; x++ )
		{
			MyObject ob=new MyObject();
			ob.setId("CHENEY"+x);
	        ob.setCode("HENAN"+x);
			ob.setTotal(x*10);
			ob.setCustomer("CUS"+x);
			ob.setRegister("EMP"+x);
            ob.setMemo("MEMO"+x);
			ob.setState("STATE"+x);
			orgData.add(ob);
		}
	   JSONArray json=JSONArray.fromObject(orgData);
	   String datas=json.toString();
	   System.out.println(datas);
	   response.getWriter().write(datas);
	}

}

 当然这里JAVA程序也用到JSON相关类，一般要使用JSON的话要使用到六个包

 

 第三：RemoteObject 获取方式

    mxml内容

   

Xml代码  

1. <?xml version="1.0" encoding="utf-8"?>  
2. <s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"    
3.                xmlns:s="library://ns.adobe.com/flex/spark"    
4.                xmlns:mx="library://ns.adobe.com/flex/mx"  
5.                xmlns:control="com.control.*"    
6.                creationComplete="creationCompleteHandle()"  
7.                minWidth="955" minHeight="600">  
8.     <fx:Style>  
9.         Application{   
10.             fontSize:12;   
11.         }   
12.     </fx:Style>  
13.     <fx:Declarations>  
14.         <s:RemoteObject id="findData" destination="findData" result="findDate_resultHandler(event)"/>  
15.     </fx:Declarations>  
16.        
17.     <fx:Script>  
18.         <![CDATA[  
19.             import com.adobe.serialization.json.JSON;  
20.               
21.             import mx.collections.ArrayCollection;  
22.             import mx.controls.Alert;  
23.             import mx.rpc.events.FaultEvent;  
24.             import mx.rpc.events.ResultEvent;  
25.               
26.             private var pageIndex:int=0;  
27.               
28.             private var pageSize:int=5;  
29.               
30.             private function creationCompleteHandle():void{  
31.                 var orgData:ArrayCollection = new ArrayCollection();  
32.                 for( var x:uint = 1; x <= 555; x++ )  
33.                 {  
34.                     var obj:Object = new Object();  
35.                     obj.ID = "id " + x.toString();  
36.                     obj.Code="order "+x;  
37.                     obj.Total=x*1000;  
38.                     obj.Customer= "customer "+x;  
39.                     obj.Register = "employee";  
40.                     obj.Memo="memo "+x;                   
41.                     obj.State="auditing state";                   
42.                     orgData.addItem(obj);  
43.                 }  
44.                 clientPagingBar1.dataGrid=DataGrid1;  
45.                 clientPagingBar1.orgData=orgData;  
46.                 clientPagingBar1.dataBind();  
47.                   
48.                   
49.                 findData.findData();  
50.             }  
51.               
52.              protected function findDate_resultHandler(event:ResultEvent):void  
53.             {  
54.                  var rawData:String = String(event.result);    
55.                  //decode the data to ActionScript using the JSON API    
56.                  //in this case, the JSON data is a serialize Array of Objects.  
57.                    
58.                  var arr:Array = (JSON.decode(rawData) as Array);    
59.                  var dataArray:ArrayCollection = new ArrayCollection(arr);   
60.                  //Alert.show(dataArray.getItemAt(0).id);  
61.                  clientPagingBar2.dataGrid=DataGrid2;  
62.                  clientPagingBar2.orgData=dataArray;  
63.                  clientPagingBar2.dataBind();  
64.             }   
65.               
66.  
67.           
68.  
69.         ]]>  
70.     </fx:Script>  
71.        
72.     <mx:VBox>        
73.         <mx:Label text="客户端分页" />  
74.         <mx:Canvas backgroundColor="white">  
75.             <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">  
76.                 <mx:DataGrid id="DataGrid1" verticalScrollPolicy="on" horizontalScrollPolicy="off">  
77.                     <mx:columns>  
78.                         <mx:DataGridColumn headerText="订单ID" dataField="ID" />  
79.                         <mx:DataGridColumn headerText="订单编码" dataField="Code" />  
80.                         <mx:DataGridColumn headerText="金额" dataField="Total" />  
81.                         <mx:DataGridColumn headerText="客户" dataField="Customer" />  
82.                         <mx:DataGridColumn headerText="销售员" dataField="Register" />  
83.                         <mx:DataGridColumn headerText="备注说明" dataField="Memo" />  
84.                         <mx:DataGridColumn headerText="状态" dataField="State" />                  
85.                     </mx:columns>  
86.                 </mx:DataGrid>  
87.                 <control:PagingBar id="clientPagingBar1" />  
88.             </mx:VBox>  
89.         </mx:Canvas>  
90.            
91.         <mx:Label text="服务器端分页" />  
92.         <mx:Canvas backgroundColor="white">  
93.             <mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">  
94.                 <mx:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="off">  
95.                     <mx:columns>  
96.                         <mx:DataGridColumn headerText="订单ID" dataField="id" />  
97.                         <mx:DataGridColumn headerText="订单编码" dataField="code" />  
98.                         <mx:DataGridColumn headerText="金额" dataField="total" />  
99.                         <mx:DataGridColumn headerText="客户" dataField="customer" />  
100.                         <mx:DataGridColumn headerText="销售员" dataField="register" />  
101.                         <mx:DataGridColumn headerText="备注说明" dataField="memo" />  
102.                         <mx:DataGridColumn headerText="状态" dataField="state" />                  
103.                     </mx:columns>  
104.                 </mx:DataGrid>  
105.                 <control:PagingBar id="clientPagingBar2" />  
106.             </mx:VBox>  
107.         </mx:Canvas>  
108.     </mx:VBox>  
109.        
110. </s:Application>  
111.   

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
			   xmlns:s="library://ns.adobe.com/flex/spark" 
			   xmlns:mx="library://ns.adobe.com/flex/mx"
			   xmlns:control="com.control.*" 
			   creationComplete="creationCompleteHandle()"
			   minWidth="955" minHeight="600">
	<fx:Style>
		Application{
			fontSize:12;
		}
	</fx:Style>
	<fx:Declarations>
		<s:RemoteObject id="findData" destination="findData" result="findDate_resultHandler(event)"/>
	</fx:Declarations>
	
	<fx:Script>
		<![CDATA[
			import com.adobe.serialization.json.JSON;
			
			import mx.collections.ArrayCollection;
			import mx.controls.Alert;
			import mx.rpc.events.FaultEvent;
			import mx.rpc.events.ResultEvent;
			
			private var pageIndex:int=0;
			
			private var pageSize:int=5;
			
			private function creationCompleteHandle():void{
				var orgData:ArrayCollection = new ArrayCollection();
				for( var x:uint = 1; x <= 555; x++ )
				{
					var obj:Object = new Object();
					obj.ID = "id " + x.toString();
					obj.Code="order "+x;
					obj.Total=x*1000;
					obj.Customer= "customer "+x;
					obj.Register = "employee";
					obj.Memo="memo "+x;	            	
					obj.State="auditing state";	            	
					orgData.addItem(obj);
				}
				clientPagingBar1.dataGrid=DataGrid1;
				clientPagingBar1.orgData=orgData;
				clientPagingBar1.dataBind();
				
				
				findData.findData();
			}
			
			 protected function findDate_resultHandler(event:ResultEvent):void
			{
				 var rawData:String = String(event.result);  
				 //decode the data to ActionScript using the JSON API  
				 //in this case, the JSON data is a serialize Array of Objects.
				 
				 var arr:Array = (JSON.decode(rawData) as Array);  
				 var dataArray:ArrayCollection = new ArrayCollection(arr); 
				 //Alert.show(dataArray.getItemAt(0).id);
				 clientPagingBar2.dataGrid=DataGrid2;
				 clientPagingBar2.orgData=dataArray;
				 clientPagingBar2.dataBind();
			} 
			

		

		]]>
	</fx:Script>
	
	<mx:VBox>		
		<mx:Label text="客户端分页" />
		<mx:Canvas backgroundColor="white">
			<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
				<mx:DataGrid id="DataGrid1" verticalScrollPolicy="on" horizontalScrollPolicy="off">
					<mx:columns>
						<mx:DataGridColumn headerText="订单ID" dataField="ID" />
						<mx:DataGridColumn headerText="订单编码" dataField="Code" />
						<mx:DataGridColumn headerText="金额" dataField="Total" />
						<mx:DataGridColumn headerText="客户" dataField="Customer" />
						<mx:DataGridColumn headerText="销售员" dataField="Register" />
						<mx:DataGridColumn headerText="备注说明" dataField="Memo" />
						<mx:DataGridColumn headerText="状态" dataField="State" />		    	
					</mx:columns>
				</mx:DataGrid>
				<control:PagingBar id="clientPagingBar1" />
			</mx:VBox>
		</mx:Canvas>
		
		<mx:Label text="服务器端分页" />
		<mx:Canvas backgroundColor="white">
			<mx:VBox width="100%" height="100%" paddingBottom="10" paddingLeft="10" paddingRight="10" paddingTop="10" verticalScrollPolicy="off" horizontalScrollPolicy="off">
				<mx:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="off">
					<mx:columns>
						<mx:DataGridColumn headerText="订单ID" dataField="id" />
						<mx:DataGridColumn headerText="订单编码" dataField="code" />
						<mx:DataGridColumn headerText="金额" dataField="total" />
						<mx:DataGridColumn headerText="客户" dataField="customer" />
						<mx:DataGridColumn headerText="销售员" dataField="register" />
						<mx:DataGridColumn headerText="备注说明" dataField="memo" />
						<mx:DataGridColumn headerText="状态" dataField="state" />		    	
					</mx:columns>
				</mx:DataGrid>
				<control:PagingBar id="clientPagingBar2" />
			</mx:VBox>
		</mx:Canvas>
	</mx:VBox>
	
</s:Application>

 

  web-info/flex/remote-config.xml

  

Xml代码  

1. <?xml version="1.0" encoding="UTF-8"?>  
2. <service id="remoting-service"    
3.     class="flex.messaging.services.RemotingService">  
4.   
5.     <adapters>  
6.         <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>  
7.     </adapters>  
8.   
9.     <default-channels>  
10.         <channel ref="my-amf"/>  
11.     </default-channels>  
12.      <destination id="findData" >  
13.      <properties>  
14.         <source>com.test.FindGridData</source>  
15.      </properties>  
16.      </destination>  
17. </service>  

<?xml version="1.0" encoding="UTF-8"?>
<service id="remoting-service" 
    class="flex.messaging.services.RemotingService">

    <adapters>
        <adapter-definition id="java-object" class="flex.messaging.services.remoting.adapters.JavaAdapter" default="true"/>
    </adapters>

    <default-channels>
        <channel ref="my-amf"/>
    </default-channels>
     <destination id="findData" >
     <properties>
        <source>com.test.FindGridData</source>
     </properties>
     </destination>
</service>

  处理类

 

Java代码  

1. package com.test;   
2.   
3. import java.util.ArrayList;   
4. import java.util.List;   
5.   
6. import net.sf.json.JSONArray;   
7.   
8. public class FindGridData {   
9.   
10.     public String findData(){   
11.         System.out.println("执行我了。。。。。。。。。。。。。。。");   
12.         List<MyObject> orgData=new ArrayList<MyObject>();   
13.         for(int x= 1; x <= 555; x++ )   
14.         {   
15.             MyObject ob=new MyObject();   
16.             ob.setId("CHENEY"+x);   
17.             ob.setCode("HENAN"+x);   
18.             ob.setTotal(x*10);   
19.             ob.setCustomer("CUS"+x);   
20.             ob.setRegister("EMP");   
21.             ob.setMemo("MEMO"+x);   
22.             ob.setState("STATE");   
23.             orgData.add(ob);   
24.         }   
25.          JSONArray json=JSONArray.fromObject(orgData);   
26.            String datas=json.toString();   
27.            System.out.println(datas);   
28.       return datas;   
29.     }   
30.        
31. }   

package com.test;

import java.util.ArrayList;
import java.util.List;

import net.sf.json.JSONArray;

public class FindGridData {

	public String findData(){
		System.out.println("执行我了。。。。。。。。。。。。。。。");
		List<MyObject> orgData=new ArrayList<MyObject>();
		for(int x= 1; x <= 555; x++ )
		{
			MyObject ob=new MyObject();
			ob.setId("CHENEY"+x);
	        ob.setCode("HENAN"+x);
			ob.setTotal(x*10);
			ob.setCustomer("CUS"+x);
			ob.setRegister("EMP");
            ob.setMemo("MEMO"+x);
			ob.setState("STATE");
			orgData.add(ob);
		}
		 JSONArray json=JSONArray.fromObject(orgData);
		   String datas=json.toString();
		   System.out.println(datas);
	  return datas;
	}
	
}

 

   四种方式显示图效果一样

 

 

最后附上corelib.swc和java相关的json必须jar包 

• 大小: 22.2 KB

• corelib.rar (52.2 KB)
• 描述: mxml中用到的json类相关文件
• 下载次数: 244

• json-lib.rar (1.1 MB)
• 描述: java中json相关jar
• 下载次数: 240

本文转载：http://javacrazyer.iteye.com/blog/708463