Может AdvancedDataGrid автоматически обнаружить AdvancedDataGridColumnGroup

Question

Я пытался пример по этой ссылке: Adobe Flex 4 * Creating column groups

Данные

import mx.collections.ArrayCollection; 
      [Bindable] 
      private var dpHierarchy:ArrayCollection = new ArrayCollection([ 
       {Region:"Southwest", Territory:"Arizona", 
        Territory_Rep:"Barbara Jennings", 
        Revenues:{Actual:38865, Estimate:40000}}, 
       {Region:"Southwest", Territory:"Arizona", 
        Territory_Rep:"Dana Binn", 
        Revenues:{Actual:29885, Estimate:30000}}, 
       {Region:"Southwest", Territory:"Central California", 
        Territory_Rep:"Joe Smith", 
        Revenues:{Actual:29134, Estimate:30000}}, 
       {Region:"Southwest", Territory:"Nevada", 
        Territory_Rep:"Bethany Pittman", 
        Revenues:{Actual:52888, Estimate:45000}}, 
       {Region:"Southwest", Territory:"Northern California", 
        Territory_Rep:"Lauren Ipsum", 
        Revenues:{Actual:38805, Estimate:40000}}, 
       {Region:"Southwest", Territory:"Northern California", 
        Territory_Rep:"T.R. Smith", 
        Revenues:{Actual:55498, Estimate:40000}}, 
       {Region:"Southwest", Territory:"Southern California", 
        Territory_Rep:"Alice Treu", 
        Revenues:{Actual:44985, Estimate:45000}}, 
       {Region:"Southwest", Territory:"Southern California", 
        Territory_Rep:"Jane Grove", 
        Revenues:{Actual:44913, Estimate:45000}} 
      ]); 


<?xml version="1.0"?> 
<s:Application xmlns:fx="http://ns.adobe.com/mxml/2009" 
    xmlns:mx="library://ns.adobe.com/flex/mx" 
    xmlns:s="library://ns.adobe.com/flex/spark"> 

    <fx:Script> 
     <![CDATA[ 
      import mx.collections.ArrayCollection; 

      // Import the data used by the AdvancedDataGrid control. 
      include "SimpleFlatData.as"; 
     ]]> 
    </fx:Script> 

    <mx:AdvancedDataGrid id="myADG" 
     dataProvider="{dpFlat}" 
     width="100%" height="100%"> 
     <mx:groupedColumns> 
      <mx:AdvancedDataGridColumn dataField="Region"/> 
      <mx:AdvancedDataGridColumn dataField="Territory"/> 
      <mx:AdvancedDataGridColumn dataField="Territory_Rep" 
       headerText="Territory Rep"/> 
      <mx:AdvancedDataGridColumnGroup headerText="Revenues">  
       <mx:AdvancedDataGridColumn dataField="Actual"/> 
       <mx:AdvancedDataGridColumn dataField="Estimate"/> 
      </mx:AdvancedDataGridColumnGroup>  
     </mx:groupedColumns> 
    </mx:AdvancedDataGrid> 
</s:Application> 

Здесь мы должны определить AdvancedDataGridColumnGroup, чтобы определить сгруппированных столбцов.

Я пытался, если AdvancedDataGrid может автоматически определять столбцы на основе данных JSON. Я попытался с помощью следующего кода:

<mx:AdvancedDataGrid id="inboxDg" 
    designViewDataType="flat" 
    editable="true" 
    dataProvider="{dpHierarchy}" 
    width="100%" height="100%"> 

</mx:AdvancedDataGrid> 

Используя этот код, AdvancedDataGrid автоматически определяет имена столбцов и данных. Но он не создает вложенные столбцы для Revenues. В идеале он должен создать 2 подстолбцы для него как Actual и Estimate, но он создал только один столбец и данные показывают, как [object Object]

Есть ли способ сделать AdvancedDataGrid автоматически создавать вложенные столбцы?

Answer 1

Ваши данные не плоские, и только потому, что вы положили его в группу, это не значит, что он будет его подгрупп. Свойство dataField не может использовать точечную нотацию внутри, поэтому у вас есть 2 варианта, используйте свойство labelFunction или создайте плоскую модель данных (я лично предпочитаю ее).

Для этого:

private var dpHierarchy:ArrayCollection = new ArrayCollection([ 
       {Region:"Southwest", Territory:"Arizona", 
        Territory_Rep:"Barbara Jennings", 
        ActualRevenue:38865, 
        EstimateRevenue:40000}, 
       {Region:"Southwest", Territory:"Arizona", 
        Territory_Rep:"Dana Binn", 
        ActualRevenue:38865, 
        EstimateRevenue:40000}, 
       {Region:"Southwest", Territory:"Central California", 
        Territory_Rep:"Joe Smith", 
        ActualRevenue:38865, 
        EstimateRevenue:40000}, 
       etc.... 
      ]); 

И тогда ваши сетки:

<mx:AdvancedDataGrid id="myADG" 
     dataProvider="{dpFlat}" 
     width="100%" height="100%"> 
     <mx:groupedColumns> 
      <mx:AdvancedDataGridColumn dataField="Region"/> 
      <mx:AdvancedDataGridColumn dataField="Territory"/> 
      <mx:AdvancedDataGridColumn dataField="Territory_Rep" 
       headerText="Territory Rep"/> 
      <mx:AdvancedDataGridColumnGroup headerText="Revenues">  
       <mx:AdvancedDataGridColumn dataField="ActualRevenue"/> 
       <mx:AdvancedDataGridColumn dataField="EstimateRevenue"/> 
      </mx:AdvancedDataGridColumnGroup>  
     </mx:groupedColumns> 
    </mx:AdvancedDataGrid> 

Вы также можете посмотреть вверх, используя labelFunction, если вы хотите, но это казалось более сложным, чем это необходимо быть. И, наконец, я считаю, что следует отметить, что вы должны установить свойство метки вручную в своих столбцах и придерживаться стандартов кодирования для ваших данных (camelCase). Это просто делает вещи немного чистыми :)