Заполните Дерево с помощью данных ArrayCollection

Question

Заполните Дерево с помощью данных ArrayCollection

Скажем, у меня был 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, который использует группы в качестве узлов с соответствующими объектами, перечисленными под каждым узлом?

5

apache-flex actionscript-3 actionscript tree components

задан jtorrance 6 April 2010 в 02:29

1 ответ

Другие вопросы по тегам:

apache-flex actionscript-3 actionscript tree components

Похожие вопросы:

score 5 · Answer 1

Вы можете использовать свойство labelField Дерева, чтобы указать, какое свойство вы хотите использовать в качестве метки для каждого узла.

В вашем примере это даст вам одноуровневое дерево :

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

Эти ссылки должны помочь вам:

Edit: созданная вами ArrayCollection содержит объекты, каждый из которых соответствует группам с элементами. Если вы хотите использовать Дерево , вам нужно мыслить иерархически, сверху вниз.

Самыми верхними объектами будут ваши «группы», состоящие из объектов, представляющих «элементы». В вашем ArrayCollection каждый индекс должен быть Object , который, в свою очередь, содержит все вложенные дочерние элементы. Обратите внимание: каждый объект должен иметь вложенные дочерние элементы, указанные в свойстве с именем «children».

Например:

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

Этот `Объект имеет иерархическую структуру:

Объект: Животные
|
| - дети
|
Собака
|
{ {1}} Cat

Отсюда объекты Dog и Cat также могут иметь свойство children , указывающее на еще один ArrayCollection . Имеет ли это смысл?

Обратите внимание, как каждый объект содержит один и тот же идентификатор. В этом случае я использовал «имя» для метки, которая будет отображаться в дереве .Вы также можете использовать свойство labelFunction для определения функции, которая возвращает String и, таким образом, может определять метку для данного узла во время выполнения.

Я взял вашу коллекцию ArrayCollection и собрал ее в простое приложение, которое отображает ее как Дерево .

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