Remplir Arbre à l'aide de données de type arraycollection

Disons que j'ai eu un type arraycollection comme ceci:

        public var ac:ArrayCollection= new ArrayCollection([
            {item:"dog", group:"Animals"},
            {item:"orange", group:"Fruits"}, 
            {item:"cat", group:"Animals"},
            {item:"apple", group:"Fruits"}
            ]);

Comment créer un composant de l'Arbre en Flex 3 qui utilise les groupes de nœuds, avec les éléments énumérés sous chaque nœud?

OriginalL'auteur jtorrance | 2010-04-06

  1. 5

    Vous pouvez utiliser le labelField propriété de l'Arbre de dicter la propriété de qui vous voulez être le label pour chaque nœud.

    Dans votre exemple, ce serait vous donner un seul niveau Tree:

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

    Ces liens devraient vous aider:

    Edit: la ArrayCollection vous avez créé contient des objets, chacun de qui correspondent à des groupes d'objets. Si vous souhaitez utiliser un Tree, vous devez penser de façon hiérarchique, de haut en bas.

    Le haut-la plupart des objets sera votre "groupes", composé d'objets représentant les "éléments." Dans votre ArrayCollection, chaque indice besoin d'être un Object qui, à son tour, contient toutes les enfants. Veuillez noter: chaque objet doit ont leur imbriqués les enfants spécifié dans une propriété nommée "enfants".

    Par exemple:

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

    Cet Objet est donc structuré de façon hiérarchique:

    Objet: Animaux

    |

    |-- les enfants

         |

         Chien

         |

         Chat

    À partir d'ici, le Dog et Cat objets pourraient également avoir une children propriété, soulignant encore un autre ArrayCollection. Est-il logique?

    Notez comment chaque objet contient le même identifiant. Dans ce cas, j'ai utilisé "nom" pour le label qui sera affiché dans la Tree. Vous pouvez également utiliser le labelFunction bien afin de définir une fonction qui retourne un String et peut donc déterminer ce que l'étiquette d'un nœud donné est au moment de l'exécution.

    J'ai pris votre ArrayCollection et regroupés dans une application simple qui affiche comme un 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" />

    J'ai essayé, mais qui n'affiche que les articles. J'ai essayé de réglage labelField="groupe", mais que seulement une liste des groupes (n'a pas à faire d'eux cliquable des nœuds avec les éléments comme les enfants). Je vais consulter les liens que vous avez posté.
    Une chose à garder à l'esprit, vous n'avez pas imbriquée à la structure de l'objet (c'est à dire les objets incorporés w/objets). En conséquence, votre "arbre", il va chercher à plat, car il ne dispose que d'un seul niveau. Les exemples que j'ai posté montrer comment imbriquer les objets w/dans les objets de sorte que vous obtenez la vue hiérarchique.
    Ont-ils vraiment montrer comment générer une structure hiérarchique à partir plat/données groupées? Le premier lien semble juste (artificiellement) ajouter "des enfants" des nœuds au tableau, alors que la seconde commence par la construction d'un hiérarchiquement structuré de type arraycollection. Ai-je raté quelque chose?
    Désolé d'avoir mis si longtemps à répondre. Voir les modifications ci-dessus.

    OriginalL'auteur bedwyr

  2. 3

    Vous pouvez créer une hiérarchie ArrayCollection avec les enfants du nœud à partir d'un plat ArrayCollection.

    Voici un lien sur les Adobes des livres de cuisine.

    OriginalL'auteur jay

  3. 1

    J'ai utilisé de cette façon et qui fonctionne pour moi: un lien!

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

    OriginalL'auteur Nahuel Ramos