apache-flex - 使用 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 属性来指定要作为每个节点的标签的属性。

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

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

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

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

<小时/>

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

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

例如:

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

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

对象:动物
|
|-- child
|
狗
|
猫

从这里开始，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" />