1

给定以下Flex组件，该组件具有绑定到 {extractRecipients}的DataGrid ，并且在第一列中带有复选框项渲染器

<mx:DataGrid id="grdOperations0" dataProvider="{extractRecipients}" height="100%" width="100%" resizableColumns="true">
    <mx:columns> 
               <mx:DataGridColumn headerText="Elegir"   width="50" textAlign="center" editable="true" editorDataField="selected" rendererIsEditor="true" dataField="selected">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:CheckBox selected="{data.selected}" click="data.selected=!data.selected">
                            </mx:CheckBox>
                        </mx:Component>
                    </mx:itemRenderer>
               </mx:DataGridColumn>
               <mx:DataGridColumn headerText="ColumnA"  dataField="reportDate" width="100" textAlign="center"/>
               <mx:DataGridColumn headerText="ColumnB"          dataField="account" width="50"/>
    </mx:columns>
</mx:DataGrid>

如何处理/冒泡复选框被选中/取消选中但在主要组件上而不是在复选框中的事件，并保持绑定。

4

1 回答 1

0

也许这段代码会有用，第一个很简单，但第二个更高级（也许是它们之间的最佳选择）：

这里是下载SWF 文件的链接以测试这两个示例。

SWF 链接 1

SWF 链接 2

源 1：请注意，该函数获取被单击的行，但不能正常工作复选框和 arraycollection 之间的绑定。这种方法在某些情况下很有用。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            [Bindable]
            public var extractRecipients:ArrayCollection;

            public function init():void{
                extractRecipients = new ArrayCollection();
                extractRecipients.addItem({reportDate:"DATE1",account:"A1",selected:true});
                extractRecipients.addItem({reportDate:"DATE2",account:"A2",selected:false});
                extractRecipients.addItem({reportDate:"DATE3",account:"A3",selected:false});
                extractRecipients.addItem({reportDate:"DATE4",account:"A4",selected:true});
            }

            public function changeEvent(event:Event):void{
                var ev:Object = event.currentTarget.data;
                txt.text = ev["reportDate"] + "-" + ev["account"] + "-" + ev["selected"];
            }
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:DataGrid id="grdOperations0" dataProvider="{extractRecipients}" height="100%" width="100%" resizableColumns="true">
            <mx:columns> 
                <mx:DataGridColumn headerText="Elegir"   width="50" textAlign="center" rendererIsEditor="true" dataField="selected" editable="true">
                    <mx:itemRenderer>
                        <mx:Component>
                            <mx:CheckBox selected="{data.selected}" change="{outerDocument.changeEvent(event)}">
                            </mx:CheckBox>                      
                        </mx:Component>
                    </mx:itemRenderer>
                </mx:DataGridColumn>
                <mx:DataGridColumn headerText="ColumnA"  dataField="reportDate" width="100" textAlign="center"/>
                <mx:DataGridColumn headerText="ColumnB"  dataField="account" width="50"/>
            </mx:columns>
        </mx:DataGrid>
        <mx:TextArea id="txt" borderStyle="solid" width="300" height="300"/>
    </mx:VBox>
</mx:Application>

SOURCE 2：这段代码更复杂，就我而言，当我不得不这样做时，我在其他源文件中创建了一个ItemRendererComponente，但在本例中，代码位于复选框内。

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" minWidth="955" minHeight="600" creationComplete="init()">
    <mx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;
            import mx.events.CollectionEvent;
            [Bindable]
            public var extractRecipients:ArrayCollection;

            public function init():void{
                extractRecipients = new ArrayCollection();
                extractRecipients.addItem({reportDate:"DATE1",account:"A1",selected:true});
                extractRecipients.addItem({reportDate:"DATE2",account:"A2",selected:false});
                extractRecipients.addItem({reportDate:"DATE3",account:"A3",selected:false});
                extractRecipients.addItem({reportDate:"DATE4",account:"A4",selected:true});
                extractRecipients.addEventListener(CollectionEvent.COLLECTION_CHANGE,changeEvent);
            }

            public function changeEvent(event:Event):void{
                var str:String = "";
                for each(var obj:Object in (event.currentTarget as ArrayCollection)){
                    str += obj["reportDate"] + "-" + obj["account"] + "-" + obj["selected"] + "\n";
                }
                txt.text = str;
            }
        ]]>
    </mx:Script>
    <mx:VBox>
        <mx:DataGrid id="grdOperations0" dataProvider="{extractRecipients}" height="100%" width="100%" resizableColumns="true">
        <mx:columns> 
            <mx:DataGridColumn headerText="Elegir"   width="50" textAlign="center" rendererIsEditor="true" dataField="selected" editable="true">
                <mx:itemRenderer>
                    <mx:Component>
                        <mx:CheckBox selected="{data.selected}" change="onChange()">
                            <mx:Script>
                                <![CDATA[
                                    import mx.collections.ArrayCollection;
                                    import mx.controls.dataGridClasses.DataGridListData;
                                    import mx.controls.listClasses.BaseListData;
                                    import mx.events.CollectionEvent;
                                    import mx.events.FlexEvent;
                                    import mx.controls.DataGrid;

                                    private var _dataField:String;
                                    private var _listData:BaseListData;
                                    private var _dataGrid:Object;

                                    override public function set listData(value:BaseListData):void {
                                        _listData = value;
                                        _dataGrid = value.owner;
                                        _dataField = (value as DataGridListData).dataField;
                                    }

                                    override public function set data(value:Object):void {      
                                        super.data = value;
                                        // Dispatch the dataChange event.
                                    }

                                    private function onChange():void {
                                        data[_dataField] = this.selected;
                                        var dp:ArrayCollection = (_dataGrid as DataGrid).dataProvider as ArrayCollection;
                                        dp.dispatchEvent(new CollectionEvent(CollectionEvent.COLLECTION_CHANGE));
                                    }

                                ]]>
                            </mx:Script>
                        </mx:CheckBox>                      
                    </mx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
            <mx:DataGridColumn headerText="ColumnA"  dataField="reportDate" width="100" textAlign="center"/>
            <mx:DataGridColumn headerText="ColumnB"          dataField="account" width="50"/>
        </mx:columns>
    </mx:DataGrid>
    <mx:TextArea id="txt" borderStyle="solid" width="300" height="300"/>
    </mx:VBox>
</mx:Application>

我希望这能帮到您。

于 2013-08-06T01:51:05.443 回答