Flex4 DataGrid 中添加编辑和删除按钮

目的是在一个DataGrid里实现点击按钮进行对DataGrid这一行的修改和删除。不多说直接上代码，看样式：

public var users:ArrayCollection=new ArrayCollection([
{id: 1, username: "aaa", dept: "开发部", phone: "11133333", email: "aaa@hotmail.com"},
{id: 2, username: "bbb", dept: "产品部", phone: "3432423", email: "ddd@ho.com"},
{id: 3, username: "ccc", dept: "开发部", phone: "32424", email: "3432@126.com"},
{id: 4, username: "ddd", dept: "产品部", phone: "334354", email: "dsf@123.com"}]);

<s:DataGrid id="userlist"
dataProvider="{users}"
width="100%"
height="100%"
fontWeight="normal"
horizontalCenter="0"
verticalCenter="0">
<s:columns>
<s:ArrayList>
<s:GridColumn headerText="用户名"
dataField="username"/>
<s:GridColumn headerText="邮箱"
dataField="email"/>
<s:GridColumn headerText="部门"
dataField="dept"/>
<s:GridColumn headerText="电话"
dataField="phone"/>
<s:GridColumn headerText=""
dataField="id"
width="50">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<mx:LinkButton toolTip="编辑"
click="updatebtn(event);"
icon="@Embed('../../../assets/images/update.gif')"
width="100%"
height="100%">
<fx:Script>
<![CDATA[
import cn.com.common.event.UpdateEvent;

private function updatebtn(event:MouseEvent):void
{
dispatchEvent(new UpdateEvent(data));
}
]]>
</fx:Script>
</mx:LinkButton>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
<s:GridColumn dataField="id"
headerText=""
width="50">
<s:itemRenderer>
<fx:Component>
<s:GridItemRenderer>
<mx:LinkButton toolTip="删除"
click="deletebtn(event);"
icon="@Embed('../../../assets/images/delete.gif')"
width="100%"
height="100%">
<fx:Script>
<![CDATA[
import cn.com.common.event.DeleteEvent;

private function deletebtn(event:MouseEvent):void
{
dispatchEvent(new DeleteEvent(data));
}
]]>
</fx:Script>
</mx:LinkButton>
</s:GridItemRenderer>
</fx:Component>
</s:itemRenderer>
</s:GridColumn>
</s:ArrayList>
</s:columns>
</s:DataGrid>

重点是在GridColumn里进行自定义渲染。这里需要注意，在Flex4里和Flex3的渲染是不太一样的，多了一个GridItemRenderer。当点击Renderer里的LinkButton时派发删除或者修改事件，下面是两个自定义事件的代码：

public class DeleteEvent extends Event
{
static public const DELETEEVENT:String = "deleteevent";

public var data:Object;

public function DeleteEvent(data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(DELETEEVENT, bubbles, cancelable);
this.data=data;
}
}

public class UpdateEvent extends Event
{
static public const UPDATEEVENT:String="updateevent";

public var data:Object;

public function UpdateEvent(data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
{
super(UPDATEEVENT, bubbles, cancelable);
this.data=data;
}
}

第一个是删除事件，第二个修改事件，这样就可以用自己的时间去捕获删除和修改事件，而不用DataGrid的click事件了。这两个事件是这样用的：

userlist.addEventListener(DeleteEvent.DELETEEVENT, deleteuserHandler);
userlist.addEventListener(UpdateEvent.UPDATEEVENT, updateuserHandler);

对这两个事件进行监听。

private function updateuserHandler(event:UpdateEvent):void
{
//这里就是修改事件，可以弹出一个TitleWindow进行修改
}
private function deleteuserHandler(event:DeleteEvent):void
{
Alert.show("确定要删除此记录?", "提示框", Alert.YES | Alert.NO, this, function():void//这里用到了内部类，这样可以将event中的数据进行应用
{
var idStr:String=event.data.id;
for(var i:int=0;i<users.length;i++)
{
if(users.getItemAt(i).id==idStr)
users.removeItemAt(i);
}
});
}