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
<tree flex="1"> <treecols> <treecol id="sender" label="Sender" flex="1"/> <treecol id="subject" label="Subject" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="[email protected]"/> <treecell label="Ściśle tajne plany"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="[email protected]"/> <treecell label="Zróbmy obiad"/> </treerow> </treeitem> </treechildren> </tree>
Atrybuty
-
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.
<!-- 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 natrue
, to column picker będzie ukryty. Domyślną wartością jestfalse
.
- 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ć. Zdarzenieonselect
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
.
- {{ XULAttr("seltype") }} {{ mediawiki['#switch']('<magic name="\"PAGENAME\"/">', XUL:richlistbox = .. '<template><name>' .. Fx_minversion_inline .. '</name><arg>' .. 3 .. '</arg></template>') }}</magic>
- Typ: jedna z wartości poniżej
- Używany do sygnalizowania czy wielokrotne zaznaczanie jest uznane.
-
single
: Tylko jeden wiersz może być zaznaczona być w czasie (domyślnie wlistbox
). -
multiple
: Wielokrotne wiersze mogą być zaznaczane jeden raz (domyślnie wtree
.)
{{ mediawiki['#switch']('<magic name="\"PAGENAME\"/">', XUL:tree = * .. '' .. cell .. '
' .. : Individual cells can be selected. .. '<template><name>' .. Fx_minversion_inline .. '</name><arg>' .. 3 .. '</arg></template>') }}</magic>
{{ mediawiki['#switch']('<magic name="\"PAGENAME\"/">', XUL:tree = * .. '' .. text .. '
' .. : Rows are selected, however the selection highlight appears only over the text of the primary column.) }}</magic>
-
statedatasource
- Typ: Źródło danych URI
-
Chrome XUL may specify an RDF datasource to use to store
tree
state information. This is used to hold which tree items are open and which items are collapsed. This information will be remembered for the next time the XUL file is opened. If you do not specify this attribute, state information will be stored in the local store (rdf:local-store
).
-
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
-
accessible
- Typ: nsIAccessible
- Zwraca obiekt dostępności dla elementu.
-
builderView
- Typ: nsIXULTreeBuilder
- Referencja do budowniczego drzewa, który konstruuje dane
tree
. Budowniczy dostarcza dostęp do źródeł RDF dla każdego wiersza w drzewie i pozwala sortować danymi w kolumnie. W nowszej wersji Mozilli, własnośćbuilderView
jest aktualnie synonimem dla własnościview
, od dwóch interfejsów są spłaszczone razem aż do pojedynczego interfejsu w JavaScript. Ta własność jest tylko do odczytu.
-
columns
- Typ: nsITreeColumns
- Zwraca kolumny dla drzewa jako obiekt nsITreeColumns.
-
contentView
- Typ: nsITreeContentView
-
For trees built with a content builder - that is, those that do not have
set -- theflags
="dont-build-content"contentView
will be a reference to the nsITreeContentView for the tree. This interface lets you retrieve the DOM element corresponding to a given a row index and vice versa. For trees that are not built with a content builder, the functions of nsITreeContentView will not be available, since there are no DOM nodes to retrieve. In newer versions of Mozilla, thecontentView
property is actually a synonym for theview
property, since the two interfaces are flattened together into a single interface in JavaScript. Ta własność jest tylko do odczytu.
-
currentIndex
- Typ: integer
- Ustawia indeks bieżącego aktywnego wiersza w
tree
(drzewie). Jeśli jest brak aktywnego wiersza, wartość będzie-1
. Dla wielu zaznaczeń drzew, bieżącym indeksem jest ostatnio zaznaczony wiersz. Nie stosuj tej własności do zmiany zaznaczenia. Zamiast stosować metody obiektunsITreeSelection
dostępnego przeztree.view.selection
.
-
enableColumnDrag
- Typ: boolean
- Kiedy ustawimy na
true
, użytkownik przesunie nagłówki kolumny, aby zmienić kolejność w jakiej są one wyświetlane.
-
firstOrdinalColumn
- Typ: element
treecol
- Referencja do elementu
treecol
, który nie musi być pierwszą kolumną wyświetlaną w drzewie.
- {{ XULProp("selType") }} {{ mediawiki['#switch']('<magic name="\"PAGENAME\"/">', XUL:richlistbox = .. '<template><name>' .. Fx_minversion_inline .. '</name><arg>' .. 3 .. '</arg></template>') }}</magic>
- Typ: string
- Pobiera i ustawia wartość atrybutu {{ XULAttr("seltype") }}.
-
selstyle
- Typ: string
- Jeśli jest ustawiona na wartość
primary
, to tylko etykieta głównej kolumny będzie podświetlona, w momencie gdy pozycja drzewa jest zaznaczona. Inaczej, cały wiersz będzie podświetlony. Aby zobaczyć różnice, porównaj styl zaznaczenia na liście folderów i liście wiadomości w programie pocztowym Mozilli.
-
treeBoxObject
- Typ: nsITreeBoxObject
-
Obiekt pudełka jest responsible for rendering the
tree
on the window. This object implements the nsITreeBoxObject interface and contains functions for retrieving the cells at certain coordinates, redrawing cells and scrolling the tree. Ta własność jest równoważna własnościboxObject
.
-
view
- Typ: nsITreeView
- Widok dla
tree
, który jest obiektem generującym dane do wyświetlenia. Do tej własności możesz przypisać obiekt implementujący interfejs nsITreeView. Drzewa zbudowane z RDF-a, albo takie, które bezpośrednio używają elementówtreeitem
, będą już miały widok. Funkcje dostępne w widoku pozwalają na pobieranie danych z komórek i pozwalają na stwierdzenie, które wiersze są zagnieżdżone w innych. Aby zobaczyć kompletną listę funkcji, obejrzyj interfejs nsITreeView.
Metody
Podobne
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); } }