Populate drzewa przy użyciu danych z ArrayCollection

Question

Powiedzmy miałem ArrayCollection takiego:

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

Jak bym utworzyć komponent drzewa w Flex 3, który używa grup jako węzły, z odpowiednich pozycji wymienionych w każdym węźle ?

Answer 1

Można użyć właściwości labelField drzewa, aby określić, która właściwość ma być etykietą dla każdego węzła.

W przykładzie byłoby to daje jednopoziomowych Tree:

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

Te linki powinny ci pomóc:

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

---

Edytuj: Utworzony przez ciebie obiekt ArrayCollection zawiera obiekty, z których każdy dopasowuje grupy do elementów. Jeśli chcesz użyć modelu Tree, musisz myśleć hierarchicznie, od góry do dołu.

Najwyższymi obiektami będą twoje "grupy" składające się z obiektów reprezentujących "przedmioty". W twoim ArrayCollection każdy indeks musi być Object, który z kolei zawiera zagnieżdżone elementy potomne. Uwaga: każdy obiekt musi mieć zagnieżdżone elementy potomne określone we właściwości o nazwie "dzieci".

Na przykład:

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

Ten `Obiekt ten sposób zorganizowany hierarchicznie:

obiektu: Zwierzęta
|
| - dzieci
          |
          Dog
          |
          Cat

Stąd te Dog i Cat obiekty mogą również mieć właściwość children, wskazując na kolejny ArrayCollection. Czy to ma sens?

Zobacz, jak każdy obiekt zawiera ten sam identyfikator. W tym przypadku użyłem "nazwy" dla etykiety, która będzie wyświetlana w Tree. Można również użyć właściwości labelFunction, aby zdefiniować funkcję, która zwraca wartość String i tym samym określić, która etykieta dla danego węzła jest w czasie wykonywania.

Wziąłem twój ArrayCollection i w pakiecie go do prostej aplikacji, która wyświetla go jako 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

Użyłem ten sposób i działa na mnie: 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

Można tworzyć hierarchiczną ArrayCollection z dziećmi węzła w nim od płaskiej ArrayCollection.

Here is a link on Adobes cookbooks.