使用 ArrayCollection 中的数据填充树

Question

假设我有一个像这样的 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 中创建一个使用组作为节点的 Tree 组件，并在每个节点下列出适当的项目？

Answer 1

您可以使用树的 labelField 属性来指定要作为每个节点的标签的属性。

在您的示例中，这将为您提供单级树：

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

这些链接应该可以帮助您：

• 数组作为树中的数据提供者
• 使用 ArrayCollection 过滤树

---

编辑：您创建的ArrayCollection包含对象，每个对象都将组与项目相匹配。如果您想使用Tree，您需要从上到下分层思考。

最顶层的对象将是您的“组”，由代表“项目”的对象组成。在 ArrayCollection 中，每个索引都需要是一个 Object，而该对象又包含任何嵌套的子项。请注意：每个对象必须在名为“children”的属性中指定其嵌套子对象。

例如：

{name: "Animals", children: new ArrayCollection([ {name: "Dog"}, {name: "Cat"} ])}

这个“对象因此是分层结构的：

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

从这里开始，Dog 和 Cat 对象也可以有一个 children 属性，指向另一个ArrayCollection。这有道理吗？

请注意每个对象如何包含相同的标识符。在本例中，我使用“name”作为标签，该标签将显示在Tree中。您还可以使用labelFunction 属性定义一个返回String 的函数，从而可以在运行时确定给定节点的标签是什么。

我将您的ArrayCollection 并将其捆绑到一个简单的应用程序中，该应用程序将其显示为Tree。

<?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" />

Answer 2

您可以从平面ArrayCollection 创建一个包含子节点的分层ArrayCollection。

这里是 Adob​​e 食谱的链接。

Answer 3

我已经使用了这种方式并且对我有用：链接！

<?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>