Kontener, który może zostać zastosowany do przechowywania tabelarycznego lub hierarchicznego zestawu rzędów elementów. Element tree może zawierać jakąkolwiek ilość rzędów oraz jakąkolwiek ilość kolumn. Każdy rząd drzewa może zawierać rzędy-dzieci, które wyświetlane są z wciętego rodzica. Inaczej, niż inne elementy, dane do wyświetlenia w drzewie nie są podawane za pomocą znaczników, ale są ustalane z obiektu widoku. Obiekt widoku implementuje interfejs nsITreeView. Widok jest kolejkowany, aby dane pojawiły się w drzewie. Istnieją różne sposoby, w których drzewa są zastosowane, jak podano poniżej. Druga kolumna listuje interfejsy dostępne poprzez właściwość view drzewa. Trzecia kolumna wskazuje czy element treeitem jest zastosowany.

Typ drzewa Interfejsy widoku Posiada węzły DOM? Opis
Drzewo zawartości nsITreeView, nsITreeContentView Tak To drzewo posiada elementy treeitem umieszczone wewnątrz elementu treechildren. W tej sytuacji, widok zawartości (implementujący interfejs nsITreeContentView), który jest bardziej wyspecjalizowanym typem widoku, używa elementów treeitem i ich potomków w celu stwierdzenia danych do wyświetlenia w drzewie. Jednakże, widok zawartości zaktualizuje się automatycznie, jeśli elementy treeitem zostaną zmienione.
Drzewo RDF nsITreeView, nsIXULTreeBuilder Nie To drzewo jest generowane ze źródła danych (datasource) RDF. Zastosowywane jest gdy drzewo posiada atrybut datasources i zawiera dont-build-content w atrybucie flags. Dla tego drzewa, dane pochodzą bezpośrednio ze źródła danych RDF. Elementy DOM treeitem nie są tworzone. Mimo, iż szablon stosuje elementy treeitem do definiowania zawartości, węzły DOM tych elementów nie są tworzone. Jest to typ drzewa, który powinien być stosowany dla drzew wygenerowanych przez RDF w dużą ilością rzędów.
Drzewo zawartości RDF nsITreeView, nsIXULTreeBuilder, nsITreeContentView Tak To drzewo jest generowane ze źródła danych RDF. Jest podobne do poprzedniego typu drzewa, lecz jest stosowane, kiedy drzewo nie zawiera dont-build-content w atrybucie flags. Elementy DOM treeitem są tworzone, więc możesz uzyskać dostęp do danych za pomocą funkcji RDF lub funkcji DOM. Ten typ jest dobry do drzew generowanych za pomocą RDF z niewielką ilością rzędów.
Własny widok drzewa nsITreeView Nie Dla tego drzewa możesz sam zaimplementować interfejs nsITreeView. Dane drzewa są pobierane z tego widoku własnego. Widok własny powinien być dołączony do drzewa poprzez ustawienie własności view drzewa.

Dodatkowe informacje są dostępne w kursie XUL oraz w Tree Widget Changes.

Atrybuty
disableKeyNavigation, disabled, enableColumnDrag, flags, hidecolumnpicker, #a-tree.onselect, rows, seltype, statedatasource, tabindex
Własności
accessible, builderView, columns, contentView, currentIndex, disableKeyNavigation, disabled, editingColumn, editingRow, enableColumnDrag, firstOrdinalColumn, selType, selstyle, tabIndex, treeBoxObject, view

Przykłady

Image:trees1.png
<tree flex="1">

  <treecols>
    <treecol id="sender" label="Sender" flex="1"/>
    <treecol id="subject" label="Subject" flex="2"/>
  </treecols>

  <treechildren>
    <treeitem>
      <treerow>
        <treecell label="joe@somewhere.com"/>
        <treecell label="Ściśle tajne plany"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="mel@whereever.com"/>
        <treecell label="Zróbmy obiad"/>
      </treerow>
    </treeitem>
  </treechildren>

</tree>

Atrybuty

disablekeynavigation
Typ: boolean
Jeśli atrybut ten nie jest użyty, użytkownik może przechodzić do określonych pozycji listy poprzez naciśnięcie pierwszej litery etykiety danej pozycji. Odbywa się to przyrostowo, dlatego przyciśnięcie dodatkowych klawiszy spowoduje zaznaczenie lepiej określonych pozycji. Opcja ta może zostać wyłączona poprzez ustawienie wartości atrybutu jako true.


disabled
Typ: boolean
Określa, czy element jest wyłączony. Jeśli atrybut ten ma wartość true, to element będzie wyłączony. Wyłączone elementy zazwyczaj są wyszarzone. Jeśli element jest wyłączony, nie odpowiada na czynności użytkownika, nie może zostać na niego ustawiony focus, a zdarzenie command nie zostanie wywołane.
grafika:XUL_ref_attr_disabled.png
<!-- Pole wyboru włącza/wyłącza przycisk -->
<checkbox label="Enable button" 
    onclick="document.getElementById('buttRemove').disabled = this.checked"/>
<button id="buttRemove" label="Remove All" disabled="true"/>
enableColumnDrag
Typ: boolean
Kiedy ustawimy na true, użytkownik ma możliwość przesunięcia nagłówków kolumny, aby zmienić kolejność w jakiej są one wyświetlane.


flags
Typ: lista wartości znajdujących się poniżej oddzielonych spacją
Ustawia flagi użyte dla różnych celów. Dwie flagi są definiowane, które mogą być wartościami tego atrybutu.
  • dont-test-empty: Dla szablonu generowanej zawartości kompilator nie sprawdzi czy kontener jest pusty.
  • dont-build-content: Ta flaga może być użyta na drzewie by wskazać, że elementy zawartości nie powinny być generowane. Poprawia to wprawdzie wydajność, lecz uniemożliwia korzystanie z funkcji DOM to pobierania wierszy drzewa.



hidecolumnpicker
Typ: boolean
Kiedy ustawiony na false, to dostępne będzie rozwijane menu w prawym górnym rogu drzewa (tree), które użytkownik może zastosować do pokazania lub ukrycia kolumn. Kiedy jest ustawiony na true, to column picker będzie ukryty. Domyślną wartością jest false.


onselect
Typ: kod skryptu
To zdarzenie jest wysyłane do tree, kiedy zostanie zaznaczony wiersz lub kiedykolwiek zostanie zmienione zaznaczenie. Użytkownik może zaznaczyć wiele wierszy poprzez przytrzymanie klawisza Shift lub Control i klikanie kursorem myszki w wiersze, które chce zaznaczyć. Zdarzenie onselect będzie przesyłane dla każdej pozycji która zostanie zaznaczona lub odznaczona.
rows
Typ: integer
Liczba wierszy do wyświetlenia w elemencie. Jeśli w elemencie znajduje się więcej niż ta liczba wierszy, pojawi się pasek przewijania, który użytkownik może zastosować do przewijania do innych wierszy. Aby pobrać aktualną liczbę wierszy w elemencie, zastosuj metodę getRowCount.
tabindex
Typ: integer
Porządek dla przełączania elementów klawiszem Tab. Elementy o wyższym tabindex umieszczane są w dalszej części sekwencji przełączania.

Własności

Metody

Dziedziczy z elementu XUL
blur, click, doCommand, focus, getElementsByAttribute

Dziedziczy z elementu DOM
addEventListener(), appendChild(), dispatchEvent(), getAttribute(), getAttributeNode(), getAttributeNodeNS(), getAttributeNS(), getElementsByTagName(), getElementsByTagNameNS(), hasAttribute(), hasAttributeNS(), hasAttributes(), hasChildNodes(), insertBefore(), isSupported(), normalize(), removeAttribute(), removeAttributeNode(), removeAttributeNS(), removeChild(), removeEventListener(), replaceChild(), setAttribute(), setAttributeNode(), setAttributeNodeNS(), setAttributeNS()

Podobne

Interfejsy
nsIAccessibleProvider, nsIDOMXULTreeElement, nsIDOMXULMultiSelectControlElement

Notatki dodane przez użytkowników

Tworzenie przemiennych kolorów dla każdego wiersza może być zrobione w arkuszu stylów, oto przykład. pma at daffodil dot uk dot com

treechildren::-moz-tree-row(selected) { background-color: #FFFFAA; }
treechildren::-moz-tree-row(odd) { background-color: #EEEEEE; }
treechildren::-moz-tree-row(odd, selected) { background-color: #FFFFAA; }
treechildren::-moz-tree-cell-text(selected) { color: #000000; }
treechildren::-moz-tree-cell-text(odd, selected) { color: #000000; }

Aby uzyskać numery ID wszystkich zaznaczonych wierszy w drzewie: tcooper_mont at yahoo dot com

var rangeCount = this.tree.view.selection.getRangeCount();
for(var i=0; i<rangeCount; i++)
{
   var start = {};
   var end = {};
   tree.view.selection.getRangeAt(i,start,end);
   for(var c=start.value; c<=end.value; c++)
   {
      idList.push(this.tree.view.getItemAtIndex(c).firstChild.id);
   }
}


Autorzy i etykiety dokumentu

Autorzy tej strony: teoli, lmorchard, Mgjbot, Bedi, Ptak82, VooEak
Ostatnia aktualizacja: teoli,