Question

我是灵活开发的新手。我有一个动态数据绑定列表组件。我需要限制用户选择超过5个项目。

列表是使用复选框和标签

getSelectionCount（）方法返回当前所选项目的数量。

这是我的代码

<s:VGroup width="100%" height="100%">           
    <s:List id="chkLst" visible="{isMultipleSelectionAllowed}" width="100%" height="100%" borderVisible="false" 
            fontFamily="segoeui"
            dataProvider="{filteredDataSet}" >
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>

                    <fx:Script>
                        <![CDATA[
                            import mx.controls.Alert;       

                            //-----------------------------------------------
                            //
                            //  Checkbox select
                            //
                            //-----------------------------------------------


                            protected function chk_clickHandler(event:MouseEvent):void
                            {
                                var selection:Array = new Array();

                                for each(var item:Object in outerDocument.chkLst.dataProvider)
                                {           
                                    selection.push(item);
                                }

                                var count:int = 0;
                                for each(var sItem:Object in selection)
                                {
                                    outerDocument.setSelectionCount(0);

                                    if(sItem.selected)
                                    {                                       
                                        count++;
                                    }
                                    outerDocument.setSelectionCount(count);
                                }

                                Alert.show(outerDocument.getSelectionCount()+"","test");

                                if(CheckBox(event.target).selected && outerDocument.getSelectionCount() <= 5){

                                        outerDocument.setSelectionCount(outerDocument.getSelectionCount()+1);

                                }


                                if(outerDocument.getSelectionCount() >= 6){


                                }

                            }
                        ]]>
                    </fx:Script>

                    <s:HGroup width="100%" height="30" gap="2" paddingLeft="5" paddingRight="5" verticalAlign="middle" clipAndEnableScrolling="true">
                        <s:CheckBox id="chk" 
                                    label="{data.label}" change="{data.selected = chk.selected}" selected="{data.selected}" 
                                    maxWidth="215" click="chk_clickHandler(event)" />
                    </s:HGroup>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>   
    </s:List>

当用户选择计数超过5时，如何禁用用户未选择的复选框？

2如果用户取消某些检查以便选择计数低于5，我还需要启用所有复选框

谢谢

Answer 1

首先，您需要在arraycollection中添加enabled属性，如下所示，itemRenderer make bindable中也enabled="{data.enabled}"。如果count达到5，我们禁用所有按钮，除了选中的按钮，启用属性和魔法的帮助我们需要使用mx.collections.IList.itemUpdated(item:Object, property:Object=null, oldValue:Object=null, newValue:Object=null):void方法更新arraycollection项目，这样只有它会反映禁用其他复选框。在我们的例子中使用outerDocument.chkLst.dataProvider.itemUpdated（item）;

示例arraycollection结构：

        <fx:Declarations>   
            <s:ArrayCollection id="filteredDataSet" >
                <fx:Object selected="false" enabled="true" label="one"/>
                <fx:Object selected="true"  enabled="true" label="two"/>
                <fx:Object selected="false" enabled="true" label="three"/>
                <fx:Object selected="false" enabled="true" label="four"/>
                <fx:Object selected="false" enabled="true" label="five"/>
                <fx:Object selected="false" enabled="true" label="six"/>
                <fx:Object selected="false" enabled="true" label="seven"/>
                <fx:Object selected="false" enabled="true" label="eight"/>
                <fx:Object selected="false" enabled="true" label="nine"/>                   
            </s:ArrayCollection>

        </fx:Declarations>

    <s:List id="chkLst" width="100%" height="100%" borderVisible="false" 
            fontFamily="segoeui"
            dataProvider="{filteredDataSet}" >
        <s:itemRenderer>
            <fx:Component>
                <s:ItemRenderer>                        
                    <fx:Script>
                        <![CDATA[
                            import mx.controls.Alert;       

                            protected function chk_clickHandler(event:MouseEvent):void
                            {
                                data.selected = chk.selected;

                                var selection:Array = [];

                                for each(var item:Object in outerDocument.chkLst.dataProvider)
                                {       
                                    if(item.selected)
                                        selection.push(item);
                                }                               

                                if(selection.length>=5)
                                {
                                    for each(var item:Object in outerDocument.chkLst.dataProvider){      
                                        item.enabled = item.selected;                                                               
                                        outerDocument.chkLst.dataProvider.itemUpdated(item);
                                    }
                                }else{
                                    for each(var item:Object in outerDocument.chkLst.dataProvider){      
                                        item.enabled = true;                                                        
                                        outerDocument.chkLst.dataProvider.itemUpdated(item);
                                    }
                                }

                            }
                        ]]>
                    </fx:Script>

                    <s:HGroup width="100%" height="30" gap="2" paddingLeft="5" paddingRight="5" verticalAlign="middle" clipAndEnableScrolling="true">
                        <s:CheckBox id="chk" label="{data.label}" selected="{data.selected}" enabled="{data.enabled}" 
                                    maxWidth="215" click="chk_clickHandler(event)" />
                    </s:HGroup>
                </s:ItemRenderer>
            </fx:Component>
        </s:itemRenderer>   
    </s:List>

禁用列表中未选择的项目选择5项后

1 个答案: