如何在Flex Item Renderer中选中所有复选框？

Question

我被困在需要选中“项目渲染器”的所有复选框的位置。

我有一个“全选”按钮，单击它需要选中我的所有复选框。 是否可以在Flex项目渲染器中执行。

下面是我的项目渲染器代码：

                          rowCount="2" columnCount="5" dragEnabled="false" dragMoveEnabled="false" height="100%"  width="100%" verticalScrollPolicy="on" verticalScrollPosition="0" selectable="false">



<mx:itemRenderer>

                        <fx:Component>

                            <!--<mx:VBox height="100%" width="100%" verticalGap="0">-->


                            <mx:VBox width="175" height="200" verticalGap="0" verticalScrollPolicy="off" horizontalScrollPolicy="off" >

                                <fx:Script>

                                    <![CDATA[
                                        import mx.collections.ArrayCollection;
                                        import mx.controls.Alert;
                                        import mx.controls.List;
                                        import mx.core.FlexGlobals;
                                        import mx.utils.ObjectUtil;

                                        [Bindable]   

                                        public var productData:Array = new Array();

                                        import mx.collections.ArrayCollection;
                                        import mx.controls.listClasses.BaseListData;
                                        private var _listData:BaseListData;
                                        private var _tileList:List;
                                        [Bindable("dataChange")]
                                        public function get listData():BaseListData
                                        {
                                            return _listData;
                                        }
                                        public function set listData(value:BaseListData):void
                                        {
                                            _listData = value;
                                            _tileList = value.owner as List;
                                        }
                                        override public function set data(value:Object):void
                                        {
                                            super.data = value;
                                            checkFileToDownload.selected = value["isSelected"];
                                        }
                                        private function onChange(event:Event):void
                                        {
                                            data["isSelected"] = checkFileToDownload.selected;
                                            FlexGlobals.topLevelApplication.checkFileToDownload(event); 
                                        }


                                        /* protected function checkSelectedFile(event:MouseEvent):void
                                        {
                                            // TODO Auto-generated method stub

                                                checkFileToDownload.selected = true;

                                                FlexGlobals.topLevelApplication.generateDownloadFileArray("push",checkFileToDownload.name,checkFileToDownload.automationName);
                                                outerDocument.downloadButtonStatus(event)


                                        } */

                                    ]]>

                                </fx:Script>

                                <mx:HBox id="currentTileElement">

                                    <s:CheckBox id="checkFileToDownload" name="{data.itemUrl}"  automationName="{data.contentId}"
                                                change="{onChange(event)}"
                                                skinClass="com.skinClass.CustomCheckBoxSkin" click="{outerDocument.downloadButtonStatus(event)}"/>

                                    <mx:TextArea wordWrap="true" fontWeight="bold" text="{data.title}" borderStyle="none"  verticalScrollPolicy="off" 

                                                 horizontalScrollPolicy="off" textAlign="left" editable="false"/>


                                </mx:HBox>

                                <mx:HBox>

                                    <mx:Image  source="{'/assets/'+data.contentId.substring(1, 2)+'.png'}" maintainAspectRatio="true"/>

                                    <mx:Image id="tileListImageSource" width="150" height="75" maintainAspectRatio="false"

                                              source="{data.localActualPath}"/>

                                </mx:HBox>


                            <!--    <mx:HBox  horizontalGap="0">

                                    <mx:Repeater id="itemCategory" dataProvider="{data.category.split('|')}">

                                        <mx:Text textAlign="left"  text="{itemCategory.currentItem}"  color="#FF9900" fontWeight="bold"  fontSize="9"  />

                                    </mx:Repeater>

                                </mx:HBox> -->


                                <mx:VBox  horizontalGap="0" width="100%" verticalGap="0" paddingLeft="25">
                                    <s:Spacer height="2"/>

                                    <mx:TextArea text="{data.author.split('|')}" color="#FF9900" fontWeight="bold" chromeColor="white" height="40" editable="false" wordWrap="true" borderStyle="none" verticalScrollPolicy="on" horizontalScrollPolicy="off" textAlign="left"/>
                                    <!-- <mx:Repeater id="authorCategory" dataProvider="{data.author.split('|')}">
                                        <mx:Text textAlign="left" fontSize="11" fontSharpness="400" fontWeight="bold" color="#FF9900"   text="{authorCategory.currentItem}"/>
                                    </mx:Repeater> -->
                                    <s:Spacer height="2"/>
                                    <mx:Text fontSize="11" text="{data.publishedDate}"/>
                                    <s:Spacer height="2"/>
                                    <mx:HBox horizontalGap="0" verticalGap="0">
                                        <mx:Text fontWeight="bold" fontSize="10" text="File Size: " paddingRight="0"/><mx:Text fontSize="10" color="red" paddingLeft="0" fontWeight="bold" text="{data.itemSize}MB"/>   
                                    </mx:HBox>
                                </mx:VBox>
                            </mx:VBox>


                        </fx:Component>

                    </mx:itemRenderer>

                </mx:TileList>

任何帮助表示赞赏。

谢谢，Ankit Tanna。

Answer 1

通过更改dataprovider对象的属性并绑定到该属性，可以影响列表中的所有复选框。 点击处理程序中的内容如下：

public function selectAllBtnClickHandler(e:MouseEvent):void {
  if (selectAllBtn.selected) {
    for each (var value:Object in checkboxList.dataProvider) {
      value["isSelected"] = true;
    }
  }
}

然后如下更改您的复选框声明：

<s:CheckBox id="checkFileToDownload" name="{data.itemUrl}"  automationName="{data.contentId}"
change="{onChange(event)}" selected="{data.isSelected}"
skinClass="com.skinClass.CustomCheckBoxSkin" click="{outerDocument.downloadButtonStatus(event)}"/>

Answer 2

我想稍微弄清楚Brian的概念，以便您可以更好地理解它。

这是我用来填充下面的网格的数组集合

[Bindable] private var testArray:ArrayCollection = new ArrayCollection
            (
                [
                    {NAME:'Alan',DEPT:'CIS',ADDRESS:'dhaka',chk:0},
                    {NAME:'Jordan',DEPT:'CIS',ADDRESS:'dhaka',chk:1},
                    {NAME:'Simmi',DEPT:'CIS',ADDRESS:'dhaka',chk:0},
                    {NAME:'Alex',DEPT:'CIS',ADDRESS:'dhaka',chk:1},
                    {NAME:'Adams',DEPT:'CIS',ADDRESS:'dhaka',chk:0}
                ]
            );

这是datagrid的代码

<mx:DataGrid height="100%" width="100%" id="dataGrid" dataProvider="{testArray}">
        <mx:columns>
            <mx:DataGridColumn headerText="Name" dataField="NAME"/>
            <mx:DataGridColumn headerText="Department" dataField="DEPT"/>
            <mx:DataGridColumn headerText="Address" dataField="ADDRESS"/>
            <mx:DataGridColumn headerText="Address" dataField="chk">
                <mx:itemRenderer>
                    <fx:Component>
                        <mx:CheckBox selected="{data.chk==1?true:false}"/>
                    </fx:Component>
                </mx:itemRenderer>
            </mx:DataGridColumn>
        </mx:columns>
    </mx:DataGrid>
<mx:Button label="Check All" click="button1_clickHandler(event)"/>

请注意，作为复选框的项目呈示器正在显示“ chk”的值。 您可以通过单击“全部选中”按钮将所有复选框设为“已选中”。 这是“ button1_clickHandler”函数

protected function button1_clickHandler(event:MouseEvent):void
        {
            for(var i:int=0;i<testArray.length;i++)
            {
                testArray[i].chk = 1;
            }
            testArray.refresh();

        }