1、設計思路
（1）新建一個DataGrid，在其中最后一列加入三個按鈕：新增、修改和刪除；
（2）點擊新增按鈕，可以將表格新增一行；
（3）單擊“修改”按鈕，可以修改表格中該行的一些屬性；
（4）單擊“刪除”按鈕，會將表格中該行刪除。
2、實現步驟
（1）新建一個應用程序，DataGrid.mxml
DataGrid.mxml：
復制代碼 代碼如下:
?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" minWidth="955" minHeight="600">
s:layout>
s:BasicLayout/>
/s:layout>
fx:Declarations>
!-- 將非可視元素（例如服務、值對象）放在此處 -->
/fx:Declarations>
fx:Script>
![CDATA[
import mx.collections.ArrayCollection;
[Bindable]
//表格數據源綁定
private var grid:ArrayCollection = new ArrayCollection([
{number:"2014010101",name:"張三",sex:"男",age:"19"},
{number:"2014010102",name:"李思",sex:"女",age:"20"},
{number:"2014010103",name:"蔡華",sex:"男",age:"21"},
{number:"2014010104",name:"牛耳",sex:"女",age:"22"},
{number:"2014010105",name:"兆司",sex:"男",age:"18"},
{number:"2014010106",name:"胡柳",sex:"女",age:"19"},
{number:"2014010107",name:"劉斯",sex:"男",age:"20"},
{number:"2014010108",name:"孫陽",sex:"女",age:"22"},
{number:"2014010109",name:"鄭武",sex:"男",age:"21"},
{number:"2014010110",name:"王雪",sex:"女",age:"20"},
{number:"2014010111",name:"胡柳",sex:"女",age:"19"},
{number:"2014010112",name:"劉斯",sex:"男",age:"20"},
{number:"2014010113",name:"孫陽",sex:"女",age:"22"},
{number:"2014010114",name:"鄭武",sex:"男",age:"21"},
{number:"2014010115",name:"王雪",sex:"女",age:"20"}
]);
]]>
/fx:Script>
mx:VBox width="100%" height="100%" paddingBottom="100" paddingLeft="100" paddingRight="100" paddingTop="100">
mx:DataGrid id="dataGrid" dataProvider="{grid}" rowCount="{grid.length+1}" width="100%" textAlign="center">
mx:columns>
mx:DataGridColumn headerText="學號" dataField="number" id="stuNumber"/>
mx:DataGridColumn headerText="姓名" dataField="name"/>
mx:DataGridColumn headerText="性別" dataField="sex"/>
mx:DataGridColumn headerText="年齡" dataField="age"/>
mx:DataGridColumn headerText="操作">
mx:itemRenderer>
fx:Component>
mx:HBox width="100%" paddingLeft="40">
fx:Script>
![CDATA[
import mx.managers.PopUpManager;
/*添加按鈕事件函數*/
protected function addHandler(event:MouseEvent):void
{
var childWindow:ChildWindow = ChildWindow(PopUpManager.createPopUp(this,ChildWindow,true));
var point:Point = new Point(100,100);
childWindow.x = point.x + 400;
childWindow.y = point.y + 50;
}
/*修改按鈕事件函數*/
protected function updateHandler(event:MouseEvent):void
{
var updateWindow:UpdateWindow = UpdateWindow(PopUpManager.createPopUp(this,UpdateWindow,true));
var point:Point = new Point(100,100);
updateWindow.x = point.x + 400;
updateWindow.y = point.y + 50;
updateWindow.stuNo = event.currentTarget.selectedItem.content;
}
]]>
/fx:Script>
mx:LinkButton label="新增" click="addHandler(event)"/>
s:Label width="10"/>
mx:LinkButton label="修改" click="updateHandler(event)"/>
s:Label width="10"/>
mx:LinkButton label="刪除"/>
/mx:HBox>
/fx:Component>
/mx:itemRenderer>
/mx:DataGridColumn>
/mx:columns>
/mx:DataGrid>
/mx:VBox>
/s:Application>
（2）新建一個新增窗口組件，ChildWindow.mxml
ChildWindow.mxml：
復制代碼 代碼如下:
?xml version="1.0" encoding="utf-8"?>
s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
close="closeHandler(event)" title="新增窗口">
s:layout>
s:BasicLayout/>
/s:layout>
fx:Script>
![CDATA[
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
/*關閉按鈕函數*/
protected function closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
/*取消按鈕函數*/
protected function cancelHandler(event:MouseEvent):void
{
PopUpManager.removePopUp(this);
}
]]>
/fx:Script>
fx:Declarations>
!-- 將非可視元素（例如服務、值對象）放在此處 -->
/fx:Declarations>
mx:VBox width="100%" height="100%" horizontalAlign="center">
mx:Form borderStyle="solid" borderColor="#CCCCCC" width="100%">
mx:FormHeading label="新增界面" fontSize="14"/>
mx:FormItem label="學號：">
s:TextInput id="stuNo" width="200"/>
/mx:FormItem>
mx:FormItem label="姓名：">
s:TextInput id="stuName" width="200"/>
/mx:FormItem>
mx:FormItem label="性別：">
s:TextInput id="stuSex" width="200"/>
/mx:FormItem>
mx:FormItem label="年齡：">
s:TextInput id="stuAge" width="200"/>
/mx:FormItem>
/mx:Form>
mx:HBox width="100%" height="25">
s:Label width="60"/>
s:Button label="新增"/>
s:Label width="48"/>
s:Button label="取消" click="cancelHandler(event)"/>
/mx:HBox>
/mx:VBox>
/s:TitleWindow>
（3）新建一個修改界面組件，UpdateWindow.mxml
UpdateWindow.mxml：
復制代碼 代碼如下:
?xml version="1.0" encoding="utf-8"?>
s:TitleWindow xmlns:fx="http://ns.adobe.com/mxml/2009"
xmlns:s="library://ns.adobe.com/flex/spark"
xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300"
close="closeHandler(event)" title="修改窗口">
s:layout>
s:BasicLayout/>
/s:layout>
fx:Script>
![CDATA[
import mx.events.CloseEvent;
import mx.managers.PopUpManager;
/*關閉按鈕函數*/
protected function closeHandler(event:CloseEvent):void
{
PopUpManager.removePopUp(this);
}
/*取消按鈕函數*/
protected function cancelHandler(event:MouseEvent):void
{
PopUpManager.removePopUp(this);
}
]]>
/fx:Script>
fx:Declarations>
!-- 將非可視元素（例如服務、值對象）放在此處 -->
/fx:Declarations>
mx:VBox width="100%" height="100%" horizontalAlign="center">
mx:Form borderStyle="solid" borderColor="#CCCCCC" width="100%">
mx:FormHeading label="修改界面" fontSize="14"/>
mx:FormItem label="學號：">
s:TextInput id="stuNo" width="200"/>
/mx:FormItem>
mx:FormItem label="姓名：">
s:TextInput id="stuName" width="200"/>
/mx:FormItem>
mx:FormItem label="性別：">
s:TextInput id="stuSex" width="200"/>
/mx:FormItem>
mx:FormItem label="年齡：">
s:TextInput id="stuAge" width="200"/>
/mx:FormItem>
/mx:Form>
mx:HBox width="100%" height="25">
s:Label width="60"/>
s:Button label="修改"/>
s:Label width="48"/>
s:Button label="取消" click="cancelHandler(event)"/>
/mx:HBox>
/mx:VBox>
/s:TitleWindow>
3、設計結果
（1）初始化時
