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中创建使用组作为节点的树组件，并在每个节点下列出相应的项目？

Answer 1

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

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

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

这些链接可以帮助您：

编辑：您创建的ArrayCollection包含对象，每个对象都与具有项目的组匹配。如果您想使用Tree，则需要从上到下按层次结构进行思考。

最顶层的对象将是您的“群组”，由代表“项目”的对象组成。在ArrayCollection中，每个索引都需要是Object，而{name: "Animals", children: new ArrayCollection([ {name: "Dog"}, {name: "Cat"} ])}则包含任何嵌套的子项。请注意：每个对象必须在名为“children”的属性中指定其嵌套子项。

例如：

Dog

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

对象：动物
|
| - 孩子们 |
狗
|
猫

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

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

{{1}}

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>

使用ArrayCollection中的数据填充树

3 个答案: