在DataGrid的GridColumn列中加入按钮宣染器

在项目中需要做如一个如下图效果的这样一个功能：

需要在DataGrid的GridColumn列中加入按钮宣染器：

1 首先声明一个spark DataGrid.在最后一列中加入按钮宣染器，红色代码部分

[html]
<s:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="on" width="100%" height="100%" minHeight="200" skinClass="com.tm.skin.DataGridSkin">
    <s:columns>
            <s:ArrayList>
                <s:GridColumn headerText="地区名称" dataField="areaName" />
                <s:GridColumn headerText="地区NO" dataField="areaNo" />
                <s:GridColumn headerText="是否使用" dataField="isUse" labelFunction="isUseValue"/>
                <SPAN style="COLOR: #ff0000"><s:GridColumn itemRenderer="com.tm.renderer.OperateItem" editable="false"/> </SPAN>
            </s:ArrayList>
    </s:columns>
</s:DataGrid>

<s:DataGrid id="DataGrid2" verticalScrollPolicy="on" horizontalScrollPolicy="on" width="100%" height="100%" minHeight="200" skinClass="com.tm.skin.DataGridSkin">
<s:columns>
   <s:ArrayList>
    <s:GridColumn headerText="地区名称" dataField="areaName" />
    <s:GridColumn headerText="地区NO" dataField="areaNo" />
    <s:GridColumn headerText="是否使用" dataField="isUse" labelFunction="isUseValue"/>
    <s:GridColumn itemRenderer="com.tm.renderer.OperateItem" editable="false"/>
   </s:ArrayList>
</s:columns>
</s:DataGrid>2 在宣染器类GridItemRenderer中，有2个按钮，并且为这2个按钮，加了自定义事件，派发出去：

[java]
<fx:Script>
        <![CDATA[
            import com.tm.event.OperateEvent;
            private function removeItem():void {
                trace(data);
                var removeEvent:OperateEvent = new OperateEvent(OperateEvent.REMOVE,data);
                this.dispatchEvent(removeEvent);
            }

            private function updateItem():void {
                var updateEvent:OperateEvent = new OperateEvent(OperateEvent.UPDATE,data);
                this.dispatchEvent(updateEvent);
            }
        ]]>
</fx:Script>

<s:Button label="编辑" click="updateItem()"/>
<s:Button label="删除" click="removeItem()"/>

<fx:Script>
  <![CDATA[
   import com.tm.event.OperateEvent;
   private function removeItem():void {
    trace(data);
    var removeEvent:OperateEvent = new OperateEvent(OperateEvent.REMOVE,data);
    this.dispatchEvent(removeEvent);
   }

   private function updateItem():void {
    var updateEvent:OperateEvent = new OperateEvent(OperateEvent.UPDATE,data);
    this.dispatchEvent(updateEvent);
   }
  ]]>
</fx:Script>

<s:Button label="编辑" click="updateItem()"/>
<s:Button label="删除" click="removeItem()"/>3 自定义事件如下：

[java]
public class OperateEvent extends Event
    {
        public var data:Object;
        public static const REMOVE:String = "remove";
        public static const UPDATE:String = "update";
        public function OperateEvent(type:String,data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
        {
            this.data = data;
            super(type, bubbles, cancelable);
        }
    }

public class OperateEvent extends Event
{
  public var data:Object;
  public static const REMOVE:String = "remove";
  public static const UPDATE:String = "update";
  public function OperateEvent(type:String,data:Object, bubbles:Boolean=true, cancelable:Boolean=false)
  {
   this.data = data;
   super(type, bubbles, cancelable);
  }
}
4 最后我们需要在主程序中，也就是使用了spark 的 DataGrid的类中，在creationComplete初始化方法中，加入对自定义事件的监听方法：

[html]
protected function CompleteHandler(event:FlexEvent):void
            {
                <SPAN style="COLOR: #cc0000">DataGrid2.addEventListener(OperateEvent.REMOVE,removeUI);
                DataGrid2.addEventListener(OperateEvent.UPDATE,updateUI);</SPAN>

补充：web前端 , HTML 5 ,