如何将单击事件添加到数据网格中的项目渲染器按钮以删除当前行？

Question

您好，我有一个包含客户姓名的数据网格，我使用内联 ItemRenderer 添加删除按钮现在我想向此按钮添加点击事件我该怎么做？我在initApp() 中添加了一个addEventListner 方法来监听点击它的工作，但我想使用按钮中的点击事件请帮助。

private function delItem(event:MouseEvent):void
        {
            if(event.target.label == "Delete User")
            {
                myArrayCollection.removeItemAt(myGrid.selectedIndex);
            }
        }
private function initApp():void
        {
            delButton.addEventListener(MouseEvent.CLICK,delItem);
        }

Answer 1

使用类似的东西

<s:DataGrid id="dataGrid" left="5" right="5" top="5" bottom="5">
    <s:ArrayCollection>
        <s:DataItem key="1000" name="Abrasive" price="100.11" call="false"/>
        <s:DataItem key="1001" name="Brush" price="110.01" call="true"/>
        <s:DataItem key="1002" name="Clamp" price="120.02" call="false"/>
        <s:DataItem key="1003" name="Drill" price="130.03" call="true"/>
        <s:DataItem key="1004" name="Epoxy" price="140.04" call="false"/>
        <s:DataItem key="1005" name="File" price="150.05" call="true"/>
        <s:DataItem key="1006" name="Gouge" price="160.06" call="false"/>
        <s:DataItem key="1007" name="Hook" price="170.07" call="true"/>
        <s:DataItem key="1008" name="Ink" price="180.08" call="false"/>
        <s:DataItem key="1009" name="Jack" price="190.09" call="true"/>
    </s:ArrayCollection>

    <s:columns>
        <s:ArrayList>
            <s:GridColumn dataField="key"/>
            <s:GridColumn dataField="name"/>
            <s:GridColumn dataField="price"/>
            <s:GridColumn dataField="call"/>
        </s:ArrayList>
    </s:columns>

    <s:itemRenderer>
        <fx:Component>
            <s:GridItemRenderer>
                <fx:Script><![CDATA[
                    import mx.controls.Alert;

                    private function button1_clickHandler(event:MouseEvent):void {
                        Alert.show("Click on button: " + data[column.dataField]);
                    }
                    ]]></fx:Script>

                <s:Button label="{data[column.dataField]}" click="button1_clickHandler(event)"/>
            </s:GridItemRenderer>
        </fx:Component>
    </s:itemRenderer>
</s:DataGrid>

好的做法是在单独的文件中定义 itemRenderer。示例：

<s:DataGrid id="dataGrid" left="5" right="5" top="5" bottom="5" itemRenderer="MyItemRenderer">...</s:DataGrid>

MyItemRenderer.mxml 文件位于 src 目录

<?xml version="1.0"?><s:GridItemRenderer xmlns:fx="http://ns.adobe.com/mxml/2009" xmlns:s="library://ns.adobe.com/flex/spark">
<fx:Script><![CDATA[
    import mx.controls.Alert;

    private function button1_clickHandler(event:MouseEvent):void {
        Alert.show("Click on button: " + data[column.dataField]);
    }
    ]]></fx:Script>

<s:Button label="{data[column.dataField]}" click="button1_clickHandler(event)"/></s:GridItemRenderer>

Answer 2

希望对你有帮助

<mx:DataGrid id="dg" dataProvider="{dp}">
    <mx:columns>
        <mx:DataGridColumn headerText="Serial No:" dataField="serial"/>
        <mx:DataGridColumn headerText="Name:" dataField="name"/>
        <mx:DataGridColumn>
            <mx:itemRenderer>
                <mx:Component>
                    <mx:Box>
                        <mx:Script><![CDATA[
                            import mx.controls.Alert;

                            private function delItem(event:MouseEvent):void {
                                Alert.show("Click");
                            }
                        ]]></mx:Script>
                        <mx:Button label="Delete User"
                                   click="delItem(event)"/>
                    </mx:Box>
                </mx:Component>
            </mx:itemRenderer>
        </mx:DataGridColumn>
    </mx:columns>
</mx:DataGrid>

Answer 3

感谢您的所有帮助我是初学者，所以花了一些时间来弄清楚，这就是我解决它的方法 <?xml version="1.0" encoding="utf-8"?> <mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical"> <mx:Script> <![CDATA[ import mx.controls.Alert; import mx.controls.Button; import mx.controls.dataGridClasses.DataGridColumn; import mx.collections.ArrayCollection; import mx.controls.DataGrid; [Bindable] private var dp:ArrayCollection = new ArrayCollection ([ {serial:1,name:"maniteja"}, {serial:2,name:"laxmi"}, {serial:3,name:"bose"} ]); public function gimmePop():void { dp.removeItemAt(dataGrid.selectedIndex); } ]]> </mx:Script>
<mx:DataGrid id="dataGrid" dataProvider="{dp}" rowCount="{dp.length}"> <mx:columns> <mx:DataGridColumn dataField="serial" headerText="Serial:"/> <mx:DataGridColumn dataField="name" headerText="Name:"/> <mx:DataGridColumn id="deleteButton"> <mx:itemRenderer> <mx:Component> <mx:Button label="Delete User" click="outerDocument.gimmePop()"/> </mx:Component> </mx:itemRenderer> </mx:DataGridColumn> </mx:columns> </mx:DataGrid> </mx:Application>