通过滚动灵活选择多个选择下拉列表

时间:2015-04-07 14:08:19

标签: flex checkbox drop-down-menu

我正在使用flex,我在自定义下拉菜单中有复选框,允许用户选择多个选项。我使用了this template

然而,这没有滚动,因为如果由于某种原因允许滚动,则复选框开始变得混乱。例如,如果您有选项1到8,则只显示1到5。您选择选项1,然后向下滚动以选择选项7.当您向上滚动复选框时,开始切换,如选项3突然显示已选中。继续向上和向下滚动,复选框选择只是自己更改。我认为这是一个渲染问题,实际的选择数据根本没有改变(它只知道选项1和选项7)。关于如何解决这个问题的任何想法?

    public function onOpen(event:DropDownEvent):void 
    {//load the checkboxes and set the mouse tracker
        activateAllCheckBoxes();
        this.scroller.verticalScrollBar.addEventListener(Event.CHANGE, list_verticalScrollBar_change);
        callLater(observeMouse);
    }   

    private function list_verticalScrollBar_change(evt:Event):void 
    {
        //currentlySelectedCheckBoxes = selectedCheckboxes;
        UpdateCheckBoxesWhenScrolling();
        selectedIndex = -1;
    }

    protected function UpdateCheckBoxesWhenScrolling():void
    {
        for (var c:int = 0; c < dataGroup.numElements; c++) {
            var obj:DropDownCheckBox = dataGroup.getElementAt(c) as DropDownCheckBox;
            if(obj!=null)
            {
                var judgDebtorFromCheckBox:JudgDebtor = (obj.data) as JudgDebtor;
                if(FindInCurrentList(judgDebtorFromCheckBox.JudgmentDebtorId)>0)
                {
                    obj.checkbox.selected = true;
                }
                else
                {
                    obj.checkbox.selected = false;
                }
            }
        }
    }

    private function FindInCurrentList(ID:int):int
    {
        for(var i:int=0;i<currentlySelectedCheckBoxes.length;i++)
        {
            var JD:JudgDebtor = currentlySelectedCheckBoxes.getItemAt(i) as JudgDebtor;
            if(JD.JudgmentDebtorId == ID)
                return 1;
        }
        return -1;
    }

所以上面的代码我在下拉列表中注册了一个滚动事件监听器。它将更新具有复选框的下拉条目,并使用名为:currentSelectedCheckBoxes的数组集合。我调试了UpdateCheckBoxesWhenScrolling函数并且它工作正常,换句话说它将检查所选的那些但由于某种原因它仍然显示错误的结果列表中的实例11条目并且只选择了第二个我向下滚动我无法看到第二个条目,但突然间最后一个条目显示它已被检查。

1 个答案:

答案 0 :(得分:0)

这是因为滚动时下拉列表会重新使用渲染器。例如,如果您已选中第一个项目并滚动,则重复使用该渲染器以显示滚动时变为可见的项目。所以最后一项显示为已选中。为避免弄乱选择,您必须在使用的渲染器中执行以下操作

override public function set data(value:Object):void
{
     super.data = value;

     //inspect the property which indicates whether to select the checkbox or not
     //and set the value of selected property accordingly
}

希望这有帮助