通过多项选择找出火花列表中取消选择的项目答案

【问题标题】：Find out deselected item in spark list with multiple selection通过多项选择找出火花列表中取消选择的项目
【发布时间】：2011-03-24 16:39:33
【问题描述】：

在火花列表中，我可以使用change 事件来找出已选择或取消选择的项目。调度的IndexChangeEvent 对象具有属性newIndex 和oldIndex 保存此信息。

但如果允许多选，这将不再起作用，因为 newIndex 和 oldIndex 可以引用仍然选择的元素的索引。

解决方案是将selectedIndices 向量复制到另一个变量，并在更改选择后将此变量与selectedIndices 进行比较，但这似乎有些复杂。

有谁知道是否有一种简单的方法可以让用户取消选择同时其他元素仍处于选中状态的索引/项目？

【问题讨论】：

IndexChangeEvent 不是 Spark 列表中记录的事件，使用更改或更改可能更好。也就是说，我没有一个简单的解决方案给你。我希望 w/allowMultipleSelection 激活 newIndex 和 oldIndex 将包含 selectedIndices 数组。在 bugs.adobe.com 提交增强请求

标签： list apache-flex selection multi-select flex-spark

【解决方案1】：

您需要存储 selectedIndicies 并比较差异。

private static function findMissing(ar1:Array, ar2:Array):Array
{
    var missing:Array = [];
    for each(var item:Object in ar1)
    {
        if(ar2.indexOf(item) < 0)
            missing.push(item);
    }

    return missing;
}

【讨论】：

【解决方案2】：

您还可以使用

扩展您的自定义数据对象

一个可绑定的布尔属性： _selected，通过列表交互更新。
和一个可以触发的事件它：selectionChanged。

在selected 设置器中——如果它真的改变了——你可以触发你自己的冒泡selectionChanged 事件，并在任何你需要的地方捕获它。

SelectableItem.as - 表示列表的一行数据的自定义数据结构

[Bindable]
[Event(name="selectionChanged",type="flash.events.Event")]
public class SelectableItem
{
    public static const EVENT_SELECTION_CHANGED:String = 'selectionChanged';
    private var _selected:Boolean;
    private var _name:String;

    public function SelectableItem()
    {
    }

    public function get selected():Boolean
    {
        return _selected;
    }

    public function set selected(value:Boolean):void
    {
        if (_selected != value)
        {
            _selected = value;
            dispatchEvent(new Event(EVENT_SELECTION_CHANGED, true));
        }
    }

    public function get name():String
    {
        return _name;
    }

    public function set name(value:String):void
    {
        _name = value;
    }
}

MyDataGrid.mxml

<?xml version="1.0" encoding="utf-8"?>
<mx:DataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:s="library://ns.adobe.com/flex/spark" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    allowMultipleSelection="true">
    <fx:Script>
        <![CDATA[
            import mx.controls.listClasses.IListItemRenderer;

            protected override function updateRendererDisplayList(r:IListItemRenderer):void
            {
                super.updateRendererDisplayList(r);
                if (r && r.data)
                    r.data.selected = DataGrid(r.owner).isItemSelected(r.data);
            }

        ]]>
    </fx:Script>
</mx:DataGrid>

TestApplication.mxml

<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.events.FlexEvent;

        [Bindable]
        private var list:ArrayCollection = new ArrayCollection();

        protected function onCreationComplete(event:FlexEvent):void
        {
            for (var i:int = 0; i < 20; i++)
            {
                var item:SelectableItem= new SelectableItem();
                item.name = 'Item ' + i;
                item.addEventListener(SelectableItem.EVENT_SELECTION_CHANGED, onItemSelectionChanged);
                list.addItem(item);
            }
        }

        private function onItemSelectionChanged(event:Event):void
        {
            trace(event);
        }

    ]]>
</fx:Script>
<my:MyDataGrid dataProvider="{list}" width="100%" height="100%" />

我希望这会有所帮助。

【讨论】：