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);
			}
		});
	}