Flex 对DataGrid进行增删改操作

<?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute"> <mx:Script> <!--[CDATA[ import mx.collections.ArrayCollection; [Bindable] public var datas:ArrayCollection=new ArrayCollection([{username:"王治郅",phone:"1658999",email:"wzz@sohu.com"}, {username:"巴特尔",phone:"1658998",email:"bater@sina.com"}, {username:"姚明",phone:"1658997",email:"ym@163.com"} ]); private function add():void{ if(ba.label=="增加") datas.addItem({username:a.text,phone:b.text,email:c.text}); else{ var item:Object=dg.selectedItem; var i:int=datas.getItemIndex(item); datas.removeItemAt(i); datas.addItemAt({username:a.text,phone:b.text,email:c.text},i); ba.label="增加"; } cc(); } private function cc():void{ a.text=""; b.text=""; c.text=""; ba.label="增加"; } private function isv():void{ pa.visible=ch.selected; } public function deletedate():void{ var item:Object=dg.selectedItem; var i:int=datas.getItemIndex(item); datas.removeItemAt(i); } public function update():void{ var item:Object=dg.selectedItem; a.text=item.username; b.text=item.phone; c.text=item.email; ba.label="修改"; } ]]--> </mx:Script> <mx:ApplicationControlBar x="151" y="61" width="539" height="29"> <mx:Label text="增删改功能" width="67"/> <mx:CheckBox id="ch" label="显示" change="isv()"/> </mx:ApplicationControlBar> <mx:Panel x="151" y="98" width="539" id="pa" height="297" layout="absolute" headerHeight="6" color="#0B333C" visible="false"> <mx:Label x="10" y="10" text="姓名：" fontSize="12"/> <mx:Label x="162" y="10" text="电话：" fontSize="12"/> <mx:Label x="298" y="10" text="电子邮件：" fontSize="12"/> <mx:TextInput x="46" y="10" width="108" id="a"/> <mx:TextInput x="198" y="10" width="92" id="b"/> <mx:TextInput x="362" y="10" width="138" id="c"/> <mx:Button x="61" y="40" id="ba" label="增加" fontSize="12" click="add()"/> <mx:Button x="138" y="40" label="撤销" click="cc()" fontSize="12"/> <mx:DataGrid id="dg" x="10" y="81" width="490" dataProvider="{datas}"> <mx:columns> <mx:DataGridColumn headerText="姓名" dataField="username"/> <mx:DataGridColumn headerText="电话" dataField="phone"/> <mx:DataGridColumn headerText="邮件" dataField="email"/> <mx:DataGridColumn headerText="操作" > <mx:itemRenderer> <mx:Component> <mx:HBox> <mx:Button label="修改" fontSize="12" click="outerDocument.update()"/> <mx:Button label="删除" fontSize="12" click="outerDocument.deletedate()"/> </mx:HBox> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Panel> </mx:Application>