0

我正在使用 flex 创建嵌套数据网格，每个级别都有不同的列（请参阅屏幕截图）。但它为每一列呈现新的数据网格。

这是我的 mxml

<?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:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable]
        private var dpHierarchy:ArrayCollection = new ArrayCollection([
            {Country:"INDIA", Category:"Developing Country" ,Population:100000000, 
                children: [
                    {State:"Andhra", Language:"Telugu", SoilColor:"Red", 
                        children:[ 
                            {District:"GUNTUR", HeadQuaters:388865, Crops:"Tobacco"}, 
                            {District:"Vijayawada", HeadQuaters:388865, Crops:"rice"}
                            ] },
                    {State:"Karnataka", Language:"Kannada", SoilColor:"Black", 
                        children:[ 
                            {District:"Mysore", HeadQuaters:388865, Crops:"Mirchi"}, 
                            {District:"Mandya", HeadQuaters:388865, Crops:"Vegetables"}
                        ] }
                    ] },
            {Country:"KOREA", Category:"UnDeveloping Country", Population:100000000, 
                children:[
                    {State:"fgff", Language:"fggff", SoilColor:"Red", 
                        children: [ 
                            {District:"fgdfgfg", HeadQuaters:388865, Crops:"Tobacco"}, 
                            {District:"gfgdfgfg", HeadQuaters:388865, Crops:"rice"}
                        ] },
                    {State:"fgfgdfg", Language:"gdfgdfg", SoilColor:"Black", 
                        children:[ 
                            {District:"ggff", HeadQuaters:388865, Crops:"Mirchi"}, 
                            {District:"gfgfgfg", HeadQuaters:388865, Crops:"Vegetables"}
                        ] }
                ] }
            ]);
    ]]>
</fx:Script>

<mx:AdvancedDataGrid width="100%" height="100%" variableRowHeight="true">
    <mx:dataProvider>
        <mx:HierarchicalData source="{dpHierarchy}"/>
    </mx:dataProvider>
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="Country" headerText="Country"/>
        <mx:AdvancedDataGridColumn dataField="Category" headerText="Category"/>
        <mx:AdvancedDataGridColumn dataField="Population" headerText="Population"/>
        <mx:AdvancedDataGridColumn dataField="children" headerText="children"/>
    </mx:columns>
    <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider columnIndex="1" columnSpan="4" depth="2"
                                             renderer="InnerGrid"/>
    <mx:AdvancedDataGridRendererProvider columnIndex="2" columnSpan="3" depth="3"
                                         renderer="InnerChildGrid"/>
    </mx:rendererProviders>
</mx:AdvancedDataGrid>

 </s:Application>

这是我的自定义渲染器 [InnerGrid.mxml]

<?xml version="1.0" encoding="utf-8"?>
<mx:AdvancedDataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
     xmlns:s="library://ns.adobe.com/flex/spark" 
     xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
    <![CDATA[
        override public function set data(value:Object):void {
            this.dataProvider = value;
        }
    ]]>
</fx:Script>
<mx:columns>
    <mx:AdvancedDataGridColumn dataField="State" headerText="State"/>
    <mx:AdvancedDataGridColumn dataField="Language" headerText="Language"/>
    <mx:AdvancedDataGridColumn dataField="SoilColor" headerText="SoilColor"/>
</mx:columns>

</mx:AdvancedDataGrid>

这是我的自定义渲染器 [InnerChildGrid.mxml]

<?xml version="1.0" encoding="utf-8"?>
<mx:AdvancedDataGrid xmlns:fx="http://ns.adobe.com/mxml/2009" 
                 xmlns:s="library://ns.adobe.com/flex/spark" 
                 xmlns:mx="library://ns.adobe.com/flex/mx" width="400" height="300">
<fx:Declarations>
    <!-- Place non-visual elements (e.g., services, value objects) here -->
</fx:Declarations>
<fx:Script>
    <![CDATA[
        override public function set data(ivalue:Object):void {
            this.dataProvider = ivalue.Districts;
        }
    ]]>
</fx:Script>
<mx:columns>
    <mx:AdvancedDataGridColumn dataField="District"/>
    <mx:AdvancedDataGridColumn dataField="HeadQuaters"/>
    <mx:AdvancedDataGridColumn dataField="Crops"/>
</mx:columns>
 </mx:AdvancedDataGrid>

在不同的数据网格中显示状态

4

1 回答 1

1

我解决了这个问题，我附上代码供将来参考

[应用程序mxml]

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="vertical">
<mx:Script>
    <![CDATA[
        import mx.collections.HierarchicalData;

        private var masterData:Array = [
            { OrderId: 10248, CustomerId:"WILMK", EmployeeId:5, OrderDate:"1-Feb-2007", 
                children:[
                    [
                        {ProductId:11, ProductName:"Quesbo Cabrales", UnitPrice:14, Quantity:12, Discount:0, Price:168, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
                        {ProductId:42, ProductName:"Singaporean Hokkien Fried Mee", UnitPrice:9.8, Quantity:10, Discount:0, Price:98, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
                        {ProductId:42, ProductName:"Mozzarella di Giovanni", UnitPrice:34.8, Quantity:5, Discount:0, Price:174, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]}
                    ]
                ]},

            { OrderId: 10249, CustomerId:"TRADH", EmployeeId:6, OrderDate:"3-Feb-2007", 
                children:[
                    [
                        {ProductId:51, ProductName:"Manjimup Dried Appels", UnitPrice:42.4, Quantity:40, Discount:0, Price:1696, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
                        {ProductId:14, ProductName:"Tofu", UnitPrice:18.6, Quantity:9, Discount:0, Price:167.4, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]}
                    ]
                ]},

            { OrderId: 10250, CustomerId:"HANAR", EmployeeId:4, OrderDate:"4-Feb-2007", 
                children:[
                    [
                        {ProductId:51, ProductName:"Manjimup Dried Appels", UnitPrice:42.4, Quantity:35, Discount:0.15, Price:1261, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
                        {ProductId:41, ProductName:"Jack's Clam Chowder", UnitPrice:7.7, Quantity:10, Discount:0, Price:77, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]},
                        {ProductId:65, ProductName:"Hot pepper Sauce", UnitPrice:16.8, Quantity:10, Discount:0.15, Price:214.2, children:[[{count:"28",place:"HYD",Amount:"1234"},{count:"28",place:"HYD",Amount:"1234"}]]}
                    ]
                ]}
        ];

    ]]>
</mx:Script>

<mx:AdvancedDataGrid dataProvider="{new HierarchicalData(masterData)}" variableRowHeight="true" width="600" height="600">
    <mx:columns>
        <mx:AdvancedDataGridColumn dataField="OrderId" headerText="Ordere ID" width="100"/>
        <mx:AdvancedDataGridColumn dataField="CustomerId" headerText="Customer ID" />
        <mx:AdvancedDataGridColumn dataField="EmployeeId" headerText="Employee ID" />
        <mx:AdvancedDataGridColumn dataField="OrderDate" headerText="Order Date" />
    </mx:columns>

    <mx:rendererProviders>
        <mx:AdvancedDataGridRendererProvider depth="2" columnIndex="1" renderer="DetailGrid" columnSpan="0" />

    </mx:rendererProviders>
</mx:AdvancedDataGrid>

</mx:Application>

[DetailGrid.mxml]

<?xml version="1.0" encoding="utf-8"?>
<mx:AdvancedDataGrid xmlns="*" variableRowHeight="true" xmlns:mx="http://www.adobe.com/2006/mxml">
   <mx:Script>
     <![CDATA[
         import mx.collections.HierarchicalData;
    override public function set data(value:Object):void
    {
            dataProvider=new HierarchicalData(value);
            this.rowCount = value.length+5;
       //   dataProvider = value;
    }
     ]]>
   </mx:Script>

  <mx:columns>
    <mx:AdvancedDataGridColumn dataField="ProductId" headerText="Product ID" />
    <mx:AdvancedDataGridColumn dataField="ProductName" headerText="Product Name" />
    <mx:AdvancedDataGridColumn dataField="UnitPrice"  />
    <mx:AdvancedDataGridColumn dataField="Discount"  />
    <mx:AdvancedDataGridColumn dataField="Price"  />
  </mx:columns>
<mx:rendererProviders>
    <mx:AdvancedDataGridRendererProvider depth="2" columnIndex="1" renderer="InnerDetailGrid" columnSpan="5" />
</mx:rendererProviders>
</mx:AdvancedDataGrid>

[InnerDetailGrid.mxml]

<?xml version="1.0" encoding="utf-8"?>
<mx:AdvancedDataGrid xmlns="*" xmlns:mx="http://www.adobe.com/2006/mxml">
<mx:Script>
    <![CDATA[
        override public function set data(value:Object):void
        {
            dataProvider = value;
            this.rowCount = value.length+1;
        }
    ]]>
</mx:Script>

<mx:columns>
    <mx:AdvancedDataGridColumn dataField="count" headerText="count" />
    <mx:AdvancedDataGridColumn dataField="place" headerText="place" />
    <mx:AdvancedDataGridColumn dataField="Amount" headerText="Amount" />
</mx:columns>

</mx:AdvancedDataGrid>

这是最后的o/p

在此处输入图像描述

于 2013-06-07T09:53:22.150 回答