我正在为使用两个列表的 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>