使用 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

您可以使用 Tree 的 labelField 属性来指定您希望哪个属性成为每个节点的标签。

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

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

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

• Array as a Data Provider in a Tree
• Filter a Tree with an ArrayCollection

---

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

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

例如：

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

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

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

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

注意每个对象如何包含相同的标识符。在这种情况下，我使用“名称”作为将在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。

Here is a link on Adobes cookbooks.

Answer 3

我用过这种方式并且为我工作：a link!

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