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

Answer 1

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

在您的示例中,这将为您提供单级Tree:

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

这些链接可以帮助您:

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

编辑:在ArrayCollection您创建包含对象,其中的每一个匹配的项目组.如果你想使用a Tree,你需要从上到下分层次地思考.

最顶层的对象将是您的"组",由表示"项目"的对象组成.在你的ArrayCollection每个索引中,每个索引都需要Object包含任何嵌套的子句.请注意:每个对象必须在名为"children"的属性中指定其嵌套子级.

例如:

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

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

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

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

请注意每个对象如何包含相同的标识符.在这种情况下,我使用"name"作为将在其中显示的标签Tree.您还可以使用该labelFunction属性来定义返回a的函数,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" />