Apache flex 使用ArrayCollection中的数据填充树

假设我有一个这样的数组集合：

        public var ac:ArrayCollection= new ArrayCollection([
            {item:"dog", group:"Animals"},
            {item:"orange", group:"Fruits"}, 
            {item:"cat", group:"Animals"},
            {item:"apple", group:"Fruits"}
            ]);

---

如何在Flex 3中创建一个使用组作为节点的树组件，并在每个节点下列出相应的项？

您可以使用树的

labelField

属性来指定要作为每个节点标签的属性

在您的示例中，这将为您提供一个单一级别的

树

：

<mx:Tree id="tree" dataProvider="{ac}" labelField="item" />

因此，该对象是分层结构的：

对象：动物
|
|--儿童
|
狗
|
猫

从这里开始，

Dog

和

Cat

对象还可以有一个

子对象

属性，指向另一个

数组集合

。这有意义吗

请注意每个对象如何包含相同的标识符。在本例中，我使用“name”作为标签，标签将显示在

树中。您还可以使用
labelFunction
属性定义一个函数，该函数返回
字符串
，从而可以确定在运行时给定节点的标签是什么

我将您的
ArrayCollection
打包到一个简单的应用程序中，该应用程序将其显示为
树

<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable] public var ac:ArrayCollection= new ArrayCollection([
             { name: "Animals", children: new ArrayCollection([ {name: "dog"},    {name: "cat"}])},
             { name: "Fruits",  children: new ArrayCollection([ {name: "orange"}, {name: "apple"} ])}]);

    ]]>
</mx:Script>
<mx:Tree dataProvider="{ac}" labelField="name" />



我用过这种方式，并且对我有效：

您可以从平面
阵列集合
创建分层
阵列集合
，其中包含子节点

我试过了，但那只列出了项目。我尝试设置labelField=“group”，但只列出了这些组（没有将它们变成可单击节点，并将项目作为子项）。我将查看您发布的链接。请记住，您没有嵌套的对象结构（即嵌入对象的对象）。因此，您的“树”将看起来平坦，因为它只有一个级别。我发布的示例展示了如何在对象中嵌套对象，从而获得层次视图。它们真的展示了如何从平面/分组数据生成层次结构吗？第一个链接似乎只是（人为地）将“子”节点添加到数组中，而第二个链接则从构造层次结构的ArrayCollection开始。我错过什么了吗？
<?xml version="1.0" encoding="utf-8"?>
<mx:Application xmlns:mx="http://www.adobe.com/2006/mxml" layout="absolute">
<mx:Script>
    <![CDATA[
        import mx.collections.ArrayCollection;
        [Bindable] public var ac:ArrayCollection= new ArrayCollection([
             { name: "Animals", children: new ArrayCollection([ {name: "dog"},    {name: "cat"}])},
             { name: "Fruits",  children: new ArrayCollection([ {name: "orange"}, {name: "apple"} ])}]);

    ]]>
</mx:Script>
<mx:Tree dataProvider="{ac}" labelField="name" />

<?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"
creationComplete="windowedapplication1_creationCompleteHandler(event)" xmlns:local="*"
width="318" height="400">
<s:layout>
    <s:VerticalLayout/>
</s:layout>
<fx:Script>
    <![CDATA[
        import mx.events.CollectionEvent;
        import mx.events.FlexEvent;

        protected function windowedapplication1_creationCompleteHandler(event:FlexEvent):void
        {
            refreshTree();    
        }

        private function refreshTree():void{
            gc.refresh();
            myTree.dataProvider = gc.getRoot();
        }

    ]]>
</fx:Script>
<fx:Declarations>

    <s:ArrayCollection id="arcData">
            <local:TestItem year="2009" month="Jan" label="Jan Report 1"/>
            <local:TestItem year="2009" month="Jan" label="Jan Report 2"/>
            <local:TestItem year="2009" month="July" label="July Report 1"/>
            <local:TestItem year="2009" month="July" label="July Report 2"/>
            <local:TestItem year="2010" month="Feb" label="Feb Report 1"/>
            <local:TestItem year="2010" month="Feb" label="Feb Report 2"/>
            <local:TestItem year="2010" month="Dec" label="Dec Report 1"/>
            <local:TestItem year="2010" month="Dec" label="Dec Report 2"/>
    </s:ArrayCollection>

    <mx:GroupingCollection2 id="gc" source="{arcData}">
        <mx:grouping>
            <mx:Grouping>
                <mx:fields>
                    <mx:GroupingField name="year"/>
                    <mx:GroupingField name="month"/>    
                </mx:fields>
            </mx:Grouping>
        </mx:grouping>
    </mx:GroupingCollection2>
</fx:Declarations>

<mx:Tree id="myTree" dataProvider="{gc.getRoot()}" labelField="GroupLabel" width="100%" height="100%">

</mx:Tree>

</s:Application>