Question

我有一个数据网格，它列出了几行

seqno | NAME  | COMPANY
1     | BOB   | D&T
2     | Jenny | M&Y
3     | Jane  | D&T

可以将按钮设置为[MOVE UP]和[MOVE DOWN]，这样当我在数据网格中选择一行并按下其中一个按钮时，订单会更改并且seqno会相应地更新

如果我选择Jane并按[MOVE UP]按钮，则表示新订单将是;

seqno | NAME  | COMPANY
1     | BOB   | D&T
2     | Jane  | D&T
3     | Jenny | M&Y

所有帮助都是适当的

Answer 1

是的，这是可能的。但是您将不得不编写自己的代码来更改原始dataProvider的顺序。使用按钮添加另一列;让他们解雇事件，并确保这些事件泡沫。收听事件，然后交换dataProvider中的相应对象。

我在Flextras DataSorter中实现了这一点，但它基于List而不是基于DataGrid。

http://www.flextras.com/?event=ProductHome&ProductID=7

Answer 2

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" xmlns:local="*">

    <local:ControlDataGrid>
        <local:dataProvider>
            <mx:ArrayCollection>
                <mx:Object a="Anny" b="43"/>
                <mx:Object a="Jenny" b="11"/>
                <mx:Object a="Den" b="9"/>
                <mx:Object a="Marty" b="5"/>
                <mx:Object a="Mary" b="-1"/>
            </mx:ArrayCollection>
        </local:dataProvider>
        <local:columns>
            <mx:DataGridColumn dataField="a"/>
            <mx:DataGridColumn dataField="b"/>
            <mx:DataGridColumn itemRenderer="{new ClassFactory(ControlItemRenderer)}"/>
        </local:columns>
    </local:ControlDataGrid>

</mx:Application>

ControlDataGrid.as的来源：

package
{
import mx.collections.ArrayCollection;
import mx.controls.DataGrid;

public class ControlDataGrid extends DataGrid
{
    public function ControlDataGrid()
    {
        addEventListener(ControlEvent.UP, upHandler);
        addEventListener(ControlEvent.DOWN, downHandler);
    }

    private function moveRow(rowIndex:int, delta:int):void
    {
        var collection:ArrayCollection = ArrayCollection(dataProvider);
        collection.addItemAt(collection.removeItemAt(rowIndex), rowIndex + delta);
    }

    private function upHandler(event:ControlEvent):void
    {
        moveRow(event.rowIndex, -1);
    }

    private function downHandler(event:ControlEvent):void
    {
        moveRow(event.rowIndex, 1);
    }
}
}

ControlItemRenderer.mxml的来源：

<?xml version="1.0" encoding="utf-8"?>
<mx:HBox xmlns:mx="http://www.adobe.com/2006/mxml"
    implements="mx.controls.listClasses.IDropInListItemRenderer">

    <mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        import mx.controls.DataGrid;
        import mx.controls.listClasses.BaseListData;
        import mx.controls.listClasses.IDropInListItemRenderer;
        import mx.events.CollectionEvent;

        [Bindable]
        private var upEnabled:Boolean = false;

        [Bindable]
        private var downEnabled:Boolean = false;

        private var _listData:BaseListData;

        [Bindable("dataChange")]
        public function get listData():BaseListData
        {
            return _listData;
        }

        public function set listData(value:BaseListData):void
        {
            _listData = value;
            dataProvider = _listData ? ArrayCollection(DataGrid(_listData.owner).dataProvider) : null;
            commitChanges();
        }

        private var _dataProvider:ArrayCollection;

        private function get dataProvider():ArrayCollection
        {
            return _dataProvider;
        }

        private function set dataProvider(value:ArrayCollection):void
        {
            if (_dataProvider == value)
                return;

            if (_dataProvider)
                _dataProvider.removeEventListener(CollectionEvent.COLLECTION_CHANGE,
                    dataProvider_collectionChangeHandler);

            _dataProvider = value;

            if (_dataProvider)
                _dataProvider.addEventListener(CollectionEvent.COLLECTION_CHANGE,
                    dataProvider_collectionChangeHandler);
        }

        private function commitChanges():void
        {
            if (!_listData || !_dataProvider)
            {
                upEnabled = false;
                downEnabled = false;
                return;
            }

            upEnabled = _listData.rowIndex > 0;
            downEnabled = _listData.rowIndex < _dataProvider.length - 1;
        }

        private function dispatch(type:String):void
        {
            dispatchEvent(new ControlEvent(type, _listData.rowIndex))
        }

        private function dataProvider_collectionChangeHandler(event:CollectionEvent):void
        {
            commitChanges();
        }

    ]]>
    </mx:Script>

    <mx:LinkButton label="Up" visible="{upEnabled}" includeInLayout="{upEnabled}"
        click="dispatch(ControlEvent.UP)" textDecoration="underline"/>

    <mx:LinkButton label="Down" visible="{downEnabled}" includeInLayout="{downEnabled}"
        click="dispatch(ControlEvent.DOWN)" textDecoration="underline"/>

</mx:HBox>

ControlEvent.as的来源：

package
{
import flash.events.Event;

public class ControlEvent extends Event
{

    public static const UP:String = "up";

    public static const DOWN:String = "down";

    public function ControlEvent(type:String, rowIndex:int)
    {
        super(type, true);

        this.rowIndex = rowIndex;
    }

    public var rowIndex:int;
}
}

Flex中数据网格中的行顺序

2 个答案: