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

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=""
     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>


效果如下：

代码下载：http://yexin218.javaeye.com/blog/203032