порядок строк в сетке данных в Flex - PullRequest
Новая
       19

порядок строк в сетке данных в Flex

3 голосов
/ 27 июня 2010

У меня есть сетка данных, и она перечисляет несколько строк как 

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

Можно использовать кнопки [MOVE UP] и [MOVE DOWN], чтобы при выборе строки в сетке данных и нажатии одной из этих кнопок порядок изменялся, а последовательность обновлялась соответственно.

То есть, если я выберу Jane и нажму кнопку [MOVE UP], новый порядок будет: 

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

Вся помощь оценена

Ответы [ 2 ]

2 голосов
/ 27 июня 2010

Да, это возможно. Но вам придется написать свой собственный код, чтобы изменить порядок вашего исходного dataProvider. Добавьте еще один столбец с помощью кнопок; попросите их запустить события и убедиться, что они всплывают. Прослушайте событие и поменяйте местами соответствующие объекты в вашем dataProvider.

Я реализовал эту самую вещь в Flextras DataSorter, однако это список, а не DataGrid.

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

1 голос
/ 27 июня 2010 
<?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;
}
}
...