Popola albero utilizzando i dati provenienti da ArrayCollection

Question

Diciamo che ho avuto un ArrayCollection come questo:

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

Come faccio a creare un componente Tree in Flex 3 che utilizza i gruppi come nodi, con le voci appropriate elencate sotto ogni nodo ?

Answer 1

È possibile utilizzare la proprietà labelField dell'albero per dettare quale proprietà si desidera essere l'etichetta per ciascun nodo.

Nel tuo esempio, questo darebbe un unico livello Tree:

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

Questi link vi possono aiutare:

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

---

Modifica: il ArrayCollection creato contiene oggetti, ognuno dei quali corrisponde a gruppi con elementi. Se si desidera utilizzare uno Tree, è necessario pensare gerarchicamente, dall'alto verso il basso.

Gli oggetti più in alto saranno i "gruppi", composti da oggetti che rappresentano gli "articoli". Nel tuo ArrayCollection, ogni indice dovrà essere un Object che, a sua volta, contiene bambini nidificati. Nota: ogni oggetto deve avere i propri figli nidificati specificati in una proprietà denominata "figli".

Ad esempio:

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

Questo `oggetto è quindi strutturato in modo gerarchico:

Oggetto: Animali
|
| - bambini
          |
          Dog
          |
          Cat

Da qui, gli Dog e Cat oggetti potrebbe anche avere una proprietà children, indicando un altro ArrayCollection. Ha senso ciò?

Nota come ciascun oggetto contiene lo stesso identificativo. In questo caso, ho usato "nome" per l'etichetta che verrà visualizzata nello Tree. È inoltre possibile utilizzare la proprietà labelFunction per definire una funzione che restituisce un valore String e quindi determinare l'etichetta per un determinato nodo in fase di esecuzione.

Ho preso il tuo ArrayCollection e lo ho raggruppato in una semplice applicazione che lo visualizza come 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" /> 

Answer 2

Ho usato questo modo e funziona per me: 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> 

Answer 3

È possibile creare un gerarchica ArrayCollection con il nodo dei bambini in esso da un appartamento ArrayCollection.

Here is a link on Adobes cookbooks.