0

我正在为使用两个列表的 flex 应用程序制作一个组件。第一个是可用项目的列表,第二个是选定项目的列表。我可以让它移动 1 个选定的项目,但我希望能够同时移动多个。你可以在这里查看我的组件。

对于下面的多项选择功能,我在修改列表之前存储了所有新旧索引。当用户单击向上/向下移动时,我希望能够将所有选定的项目向上或向下移动一个索引。

private function moveUpOrDown(collection:ArrayCollection, isUp:Boolean,
    numPlaces:int=1):void {
  var selected:Array = selectedItems.selectedItems;
  var index:Array = new Array();
  for each (var item:Object in (isUp ? selected.reverse() : selected)) {
    var oldIndex:int = selectedData.getItemIndex(item);
    var newIndex:int = oldIndex + (isUp ? -1 : 1) * numPlaces;
    index.push({'old': oldIndex, 'new': newIndex});
  }

  for (var i:uint = 0; i < selected.length; i++) {
    var dex:Object = index[i];
    if ((isUp && dex['new'] > -1) || (!isUp && dex['new'] < collection.length)) {
      swapIndicies(collection, dex['old'], dex['new']);
    }
  }
  selectedItems.selectedItems = selected;
  reIndexItems();
  printItems();
}

这是我向上或向下移动单个项目的完整应用程序。

<?xml version="1.0" encoding="utf-8"?>
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009"
  xmlns:s="library://ns.adobe.com/flex/spark"
  xmlns:mx="library://ns.adobe.com/flex/mx"
  width="356" height="280" horizontalCenter="0" verticalCenter="0"
  backgroundColor="0x000000"
  initialize="onInitialize(event)"
  viewSourceURL="srcview/index.html">
  <fx:Script>
    <![CDATA[
      import mx.collections.ArrayCollection;
      import mx.controls.Alert;
      import mx.events.FlexEvent;
      import mx.utils.StringUtil;

      // Visual layout
      [Bindable] private var _mainBgColor:uint = 0xDDE0F0;
      [Bindable] private var _controlBgColor:uint = 0xEEF0FF;
      [Bindable] private var _listWidth:uint = 112;
      [Bindable] private var _padding:uint = 12;
      [Bindable] private var _imgHight:uint = 32;

      // Used as a bindable data provider for each list
      [Bindable] private var availableData:ArrayCollection = new ArrayCollection();
      [Bindable] private var selectedData:ArrayCollection = new ArrayCollection();

      private var items:ArrayCollection = new ArrayCollection([
        { 'label': 'January',   'position': 0 },
        { 'label': 'Feburary',  'position': 1 },
        { 'label': 'March',     'position': 2 },
        { 'label': 'April',     'position': 3 },
        { 'label': 'May',       'position': 4 },
        { 'label': 'June',      'position': 5 },
        { 'label': 'July',      'position': null },
        { 'label': 'August',    'position': null },
        { 'label': 'September', 'position': null },
        { 'label': 'October',   'position': null },
        { 'label': 'November',  'position': null },
        { 'label': 'December',  'position': null }
      ]);

      protected function onInitialize(event:FlexEvent):void {
        for each (var item:Object in items) {
          if (item.position != null)
            selectedData.addItem(item);
          else
            availableData.addItem(item);
        }
      }

      private function moveRight(event:MouseEvent):void {
        moveRightOrLeft(availableItems, availableData, selectedData);
      }

      private function moveLeft(event:MouseEvent):void {
        moveRightOrLeft(selectedItems, selectedData, availableData);
      }

      private function moveUp(event:MouseEvent):void {
        moveUpOrDown(selectedData, true);
      }

      private function moveDown(event:MouseEvent):void {
        moveUpOrDown(selectedData, false);
      }

      private function moveRightOrLeft(list:List, from:ArrayCollection,
          to:ArrayCollection):void {
        for each (var obj:Object in list.selectedItems.reverse()) {
          to.addItem(obj);
          from.removeItemAt(from.getItemIndex(obj));
        }
        list.selectedItems = [];
        reIndexItems();
        printItems();
      }

      private function moveUpOrDown(collection:ArrayCollection, isUp:Boolean,
          numPlaces:int=1):void {
        var selectedItem:Object = selectedItems.selectedItem;
        var oldIndex:int = selectedData.getItemIndex(selectedItem);
        var newIndex:int = oldIndex + (isUp ? -1 : 1) * numPlaces;
        if ((isUp && newIndex > -1) || (!isUp && newIndex < collection.length)) {
          swapIndicies(collection, oldIndex, newIndex);
          selectedItems.selectedItem = selectedItem;
        }
        reIndexItems();
        printItems();
      }

      private function swapIndicies(collection:ArrayCollection, oldIndex:uint,
          newIndex:uint):void {
        var itemToMove:Object = collection.removeItemAt(oldIndex);
        collection.addItemAt(itemToMove, newIndex);
      }

      private function reIndexItems():void {
        var item:Object;
        var pos:uint = 0;
        for each (item in availableData)
          item.position = null;
        for each (item in selectedData)
          item.position = pos++;
      }

      private function printItems():void {
        trace('############ ITEMS ############');
        for each (var item:Object in items) {
          trace(StringUtil.substitute('{0}: {1}',
            padStr(item.label, ' ', -10), item.position));
        }
      }

      private function padStr(str:String, pad:String, num:int):String {
        while (str.length < Math.abs(num))
          str = num > 0 ? str + pad : pad + str;
        return str;
      }

      protected function submit(event:MouseEvent):void {
        var items:Array = new Array();
        for each (var item:Object in selectedData)
          items.push(item.label);
        var text:String = items.join(',');
        Alert.show(text, 'Selected Items');
      }
    ]]>
  </fx:Script>
  <mx:VBox id="mainBox" width="100%"
    backgroundColor="{_mainBgColor}" horizontalCenter="0" verticalCenter="0"
    horizontalAlign="center" verticalAlign="middle"
    horizontalScrollPolicy="off" verticalScrollPolicy="off">
    <mx:HBox id="controlBox" width="100%"
      backgroundColor="{_controlBgColor}"
      paddingTop="{_padding}" paddingBottom="{_padding}"
      paddingRight="{_padding}" paddingLeft="{_padding}">
      <mx:VBox id="availableBox" width="100%" height="100%">
        <mx:Label width="100%" textAlign="center">
          <mx:htmlText><![CDATA[<b>Available</b>]]></mx:htmlText>
        </mx:Label>
        <mx:List id="availableItems" dataProvider="{availableData}"
          allowMultipleSelection="true" width="{_listWidth}" rowCount="8"
          alternatingItemColors="[0xDDEAFF,0xFFFFFF]" />
          <!-- dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" /-->
      </mx:VBox>
      <mx:VBox id="moveHorizontalBox" verticalAlign="middle" width="100%" height="100%">
        <s:Button id="arrowRight" icon="@Embed(source='assets/arrowRight.png')"
          width="{_imgHight}" height="{_imgHight}" click="moveRight(event)" />
        <s:Button id="arrowLeft" icon="@Embed(source='assets/arrowLeft.png')"
          width="{_imgHight}" height="{_imgHight}" click="moveLeft(event)" />
      </mx:VBox>
      <mx:VBox id="selectedBox" width="100%" height="100%">
        <mx:Label width="100%" textAlign="center">
          <mx:htmlText><![CDATA[<b>Selected</b>]]></mx:htmlText>
        </mx:Label>
        <mx:List id="selectedItems" dataProvider="{selectedData}"
          allowMultipleSelection="true" width="{_listWidth}" rowCount="8"
          alternatingItemColors="[0xDDEAFF,0xFFFFFF]" />
          <!-- dragEnabled="true" dropEnabled="true" dragMoveEnabled="true" /-->
      </mx:VBox>
      <mx:VBox id="moveVerticalBox" verticalAlign="middle"  width="100%" height="100%">
        <s:Button id="arrowUp" icon="@Embed(source='assets/arrowUp.png')"
          width="{_imgHight}" height="{_imgHight}" click="moveUp(event)" />
        <s:Button id="arrowDown" icon="@Embed(source='assets/arrowDown.png')"
          width="{_imgHight}" height="{_imgHight}" click="moveDown(event)" />
      </mx:VBox>
    </mx:HBox>
    <mx:HBox id="submitBox" width="100%" horizontalAlign="center" verticalAlign="middle"
        paddingBottom="{_padding}">
      <s:Button label="Submit" click="submit(event)" />
    </mx:HBox>
  </mx:VBox>
</s:Application>
4

1 回答 1

0

我相信我想通了。如果我向上移动它们,我想我只需要反转选定的项目:

selectedItems.selectedItems = (isUp ? selected.reverse() : selected);

这是我更新的功能:

private function moveUpOrDown(collection:ArrayCollection, isUp:Boolean,
    numPlaces:int=1):void {
  var selected:Array = selectedItems.selectedItems;
  var index:Array = new Array();
  for each (var item:Object in (isUp ? selected.reverse() : selected)) {
    var oldIndex:int = selectedData.getItemIndex(item);
    var newIndex:int = oldIndex + (isUp ? -1 : 1) * numPlaces;
    index.push({'oldIndex': oldIndex, 'newIndex': newIndex});
  }

  for (var i:uint = 0; i < selected.length; i++) {
    var dex:Object = index[i];
    if ((isUp && dex.newIndex > -1) ||
        (!isUp && dex.newIndex < collection.length)) {
      swapIndicies(collection, dex.oldIndex, dex.newIndex);
    }
  }
  selectedItems.selectedItems = (isUp ? selected.reverse() : selected);
  reIndexItems();
  printItems();
}
于 2013-06-09T21:32:36.710 回答