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创建嵌套列。理想情况下，它应为Actual和Estimate创建2个子列，但它只创建了一列，并且显示数据为[object Object] AdvancedDataGrid with auto-detect columns

有没有办法让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查找，但这似乎比它需要的更复杂。最后我觉得我应该注意你应该在列上手动设置label属性并遵守数据的编码标准（camelCase）。它只是让事情变得更清洁：）

AdvancedDataGrid可以自动检测AdvancedDataGridColumnGroup

1 个答案: