Populate Baum unter Verwendung von Daten aus Arraycollection

Question

Lassen Sie uns sagen, dass ich eine Arraycollection wie folgt hatte:

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

Wie würde ich eine Tree-Komponente in Flex 3 erstellen, die die Gruppen als Knoten verwendet, mit den entsprechenden Positionen unter jedem Knoten aufgelistet ?

Answer 1

Sie können die Eigenschaft labelField der Struktur verwenden, um festzulegen, welche Eigenschaft für jeden Knoten die Bezeichnung sein soll.

In Ihrem Beispiel würde dies gibt Ihnen ein einstufig Tree:

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

Diese Links sollen Ihnen helfen:

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

---

Bearbeiten: die ArrayCollection Sie erstellt enthält Objekte, von denen jede Gruppen mit Elementen übereinstimmen. Wenn Sie eine Tree verwenden möchten, müssen Sie hierarchisch denken, von oben nach unten.

Die obersten Objekte sind Ihre "Gruppen", die aus Objekten bestehen, die die "Objekte" darstellen. In Ihrem ArrayCollection muss jeder Index ein Object sein, der wiederum verschachtelte untergeordnete Elemente enthält. Bitte beachten Sie: Jedes Objekt muss ihre verschachtelten Kinder in einer Eigenschaft namens "Kinder" angegeben haben.

Zum Beispiel:

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

Dieses `Objekt so hierarchisch strukturiert:

Objekt: Tiere
|
| - Kinder
          |
          Hund
          |
          Cat

Von hier aus werden die Dog und Cat Objekte auch children Eigenschaft haben könnte, zeigt eine andere noch ArrayCollection. Macht das Sinn?

Beachten Sie, wie jedes Objekt den gleichen Bezeichner enthält. In diesem Fall habe ich "name" für das Etikett verwendet, das im Tree angezeigt wird. Sie können auch die labelFunction-Eigenschaft verwenden, um eine Funktion zu definieren, die eine String zurückgibt und damit ermitteln kann, wie die Beschriftung für einen bestimmten Knoten zur Laufzeit ist.

Ich nahm Ihre ArrayCollection und bündelte es in eine einfache Anwendung, die es als Tree anzeigt.

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

Ich habe diese Art und Weise verwendet und funktioniert für mich: 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

Sie können darin von einer flachen ArrayCollection eine hierarchische ArrayCollection mit Kindern Knoten erstellen.

Here is a link on Adobes cookbooks.