Flex DataGrid и вложенный массив данных Array

Question

Я использовал сетку данных во многих проектах, заполнял сетку, используя следующую «Обычную структуру данных», и привел стандартную o / p, как показано ниже Image. Но теперь для одного назначения я хочу получить тот же результат сетки, используя нижеупомянутую «Сложную структуру данных» (вложенный массив). У меня есть идея, которая заключается в обработке данных перед их отправкой в ​​Grid, но проблема в том, что мне нужно выполнить какое-то обновление, изменить операцию удаления с помощью средств визуализации сетки, и то же самое должно быть отражено и в исходной коллекции. Пожалуйста, дайте мне знать, есть ли способ, которым я могу использовать "Сложную структуру" и вывести ожидаемое значение o / p, используя любой flex в свойствах сборки. Заранее спасибо.

Обычная структура данных

steps = [a,b,c];
a = {x:100,y:y1,z:z1};
b = {x:200,y:y2,z:z2};
c = {x:300,y:y3,z:z3};

Сложная структура данных

[] is an Array collection not Array type.    
a = [100,y1,z1];
b = [200,y2,z2];
c = [300,y3,z3];
steps = [[a,some objects],[b,some objects],[c,some objects]];

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute" creationComplete="init()">
<mx:Script>
    <![CDATA[

        import mx.collections.ArrayCollection;

        private var a:ArrayCollection = new ArrayCollection(['x1','y1','z1']);
        private var b:ArrayCollection = new ArrayCollection(['x2','y2','z2']);
        private var c:ArrayCollection = new ArrayCollection(['x3','y3','z3']);
        [Bindable]
        private var stepsObjs:ArrayCollection = new ArrayCollection([{ items: a},{ items: b},{ items: c}]);

    ]]>
</mx:Script>

<mx:DataGrid dataProvider="{stepsObjs}" >
    <mx:columns>
        <mx:DataGridColumn dataField="items.0" headerText="x" />
        <mx:DataGridColumn dataField="items.1" headerText="y" />
        <mx:DataGridColumn dataField="items.2" headerText="z" />
    </mx:columns>
</mx:DataGrid>  
</mx:Application>

Answer 1

РЕДАКТИРОВАТЬ Замена на код для решения нового вопроса.

---

Этот работал для меня:

<?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" minWidth="955" minHeight="600"
               >
    <fx:Script>
        <![CDATA[
            import mx.collections.ArrayCollection;

            private var a:ArrayCollection = new ArrayCollection([100,'y1','z1']);
            private var b:ArrayCollection = new ArrayCollection([200,'y2','z2']);
            private var c:ArrayCollection = new ArrayCollection([300,'y3','z3']);

            private var stepsObjs:ArrayCollection = new ArrayCollection([{ items: a},{ items: b},{ items: c}]);
            private var stepsColl:ArrayCollection = new ArrayCollection([[a],[b],[c]]);

        ]]>
    </fx:Script>
    <s:layout>
        <s:VerticalLayout />
    </s:layout>
    <mx:DataGrid dataProvider="{stepsObjs}" >
        <mx:columns>
            <mx:DataGridColumn dataField="items.0" headerText="x" />
            <mx:DataGridColumn dataField="items.1" headerText="y" />
            <mx:DataGridColumn dataField="items.2" headerText="z" />
        </mx:columns>
    </mx:DataGrid>

    <mx:DataGrid dataProvider="{stepsColl}" >
        <mx:columns>
            <mx:DataGridColumn dataField="0.0" headerText="x" />
            <mx:DataGridColumn dataField="0.1" headerText="y" />
            <mx:DataGridColumn dataField="0.2" headerText="z" />
        </mx:columns>
    </mx:DataGrid>

</s:Application>

Answer 2

ItemRenderers должен отправить событие, которое описывает, что должно произойти, и затем оно должно быть обработано выше.

Примерно так:

//inside item renderer
dispatchEvent(new ItemEvent(ItemEvent.DELETE_ITEM, true, item));//where true tells the event to bubble (you'll need to create this event)

//somewhere above the DataGrid
dataGrid.addEventListener(ItemEvent.DELETE_ITEM, deleteItemFromSource);

protected function deleteItemFromSource(e:ItemEvent):void {
    var lcv:ListCollectionView = (dataGrid.dataProvider as ListCollectionView);
    lcv.removeItemAt(lcv.getItemIndex(e.item));
}

Обратите внимание, что вы должны бытьиспользуя какой-то ListCollectionView, если вы хотите, чтобы сетка данных автоматически обновлялась при его изменении, , а не Массив.

HTH;

Эми