Flex创建可编辑以及分页的DataGrid

   之前那篇文章：使用Flex,Java,Json更新Mysql数据库 已经介绍了如何使用Json格式的数据从后台用remoteObject的方法读取后现在Flex的DataGrid中。但是如果数据的量很大，就要使用scroll的方式来浏览了，这样造就了很多不变。参考了javally的应用分页列表组件 后结合两个程序就可以比较完美的实现一个可以编辑的以及分页的dataGrid了。使得用户可以读取数据库数据，然后在编辑后，保存数据。有兴趣的话最后先阅读这两篇文章，这样之后就很容易理解了。关于使用Blazeds的配置我就省略了，请自行参考。

  java后台的处理同使用Flex,Java,Json更新Mysql数据库 大致上一样，只是更改了一些方法的名字。现在主要贴出前台Flex主程序的代码：

<?xml version="1.0"?>
<!-- DataGrid control example. -->
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml"
	 creationComplete="creationComplete()" 
	xmlns:user="comp.*">
	<mx:Script>
		<![CDATA[
		import mx.controls.Alert;
		import mx.collections.ArrayCollection;
		import mx.rpc.events.ResultEvent;
		import com.adobe.serialization.json.JSON;
		import mx.rpc.events.ResultEvent;
        import mx.collections.ArrayCollection;	
		
           [Bindable]   
           private var ac:ArrayCollection;   
           //如果查询出来的数据为xml格式，调用这个方法   
           private function loadXmlData(xml:XML):void  
           {   
              ac=new ArrayCollection();   
              for each(var item:Object in xml.employee)//将Table换成XML中的根元素名称   
              {   
                  ac.addItem(item);   
              }    
              myDG.init(ac);   
           } 
           private function getGridDataAction():void{
            getDataObj.getGridData();
            labNote.text="正在读取...请稍候";
        }
           //查询出来的结果为数组，直接传递给init即可
			private function loadAcData(event:ResultEvent):void
			{  
				var rawArray:Array;
				var rawData:String = event.result as String;
			    rawArray = JSON.decode(rawData) as Array;
				ac=new ArrayCollection();	
				ac = new ArrayCollection(rawArray);			               
			    myDG.init(ac); 
			     labNote.text="读取成功,总共"+ac.length+"条员工信息!";
			}   
			           
           private function creationComplete():void
           {
           	//loadXmlData(employees);
           	getDataObj.getOperation('getGridData').send(); 
           }
           
           private function updateGridDataAction():void{
            //var objSend:Object = new Object();
            var dataString:String = JSON.encode(ac.toArray());
            //dataString = escape(dataString);
            updateDataObj.updateGridDataToDB(dataString);
            labNote.text = "请稍后...正在处理";
        }
        private function updateGridDataResult(event:ResultEvent):void{
            labNote.text = String(event.result as String);
        }
		]]>
	</mx:Script>
		
    <!-- remoteObject used to get data from mysql database -->
     <mx:RemoteObject id="getDataObj" destination="getGridData" source="pagegrid.PageGrid" showBusyCursor="true">
     <mx:method name="getGridData" result="loadAcData(event)"/>
    </mx:RemoteObject>
    <!-- update data to mysql database-->
    <mx:RemoteObject id="updateDataObj" destination="updateGridData" showBusyCursor="true" result="updateGridDataResult(event)"/>
    <mx:Panel title="Employee Inforamtion Management System" height="288" width="100%" 
        paddingTop="10" paddingLeft="10" paddingRight="10" layout="absolute">

    <!--设置pageSize为8,表示每页显示8条记录，不设置默认显示5条记录-->
   	<!--dataGridDoubleClick="showUserInfo()" -->
    <user:PaginationDataGrid id="myDG" label="Employees" 
      width="100%" height="175" pageSize="5">

       <user:arrColumns><!--为这个标签设置DataGridColumn，指示在DataGrid上显示的列-->

			<mx:DataGridColumn headerText="ID" dataField="id" editable="false"/>
			<mx:DataGridColumn headerText="Name" dataField="name" editable="true"/>
			<mx:DataGridColumn headerText="Gender" dataField="gender" editable="false"/>
            <mx:DataGridColumn headerText="Department" dataField="department" editable="false"/>
       </user:arrColumns>

    </user:PaginationDataGrid>	
    <mx:Button label="Refresh" x="417" y="183" width="120" click="getGridDataAction()"/>
    <mx:Button id="updateDataBtn"  x="72" y="183" label="Update" width="120" textAlign="center" click="updateGridDataAction()"/>
    <mx:Label id="labNote" x="10" y="214" width="637" color="#0000FF" height="24" fontSize="12" fontFamily="Times New Roman"/>
        
    </mx:Panel>
</mx:Application>  

 附件中包含了源码。