Représente un arbre, un conteneur pouvant être utilisé pour un ensemble de lignes d'éléments tabulaires ou hiérarchiques. L'arbre peut contenir un nombre quelconque de lignes et de colonnes. Chaque ligne de l'arbre peut contenir des lignes filles qui seront affichées avec un décalage par rapport à leur parent. Contrairement aux autres éléments, les données à afficher à l'intérieur de l'arbre ne sont pas spécifiées à l'aide de balises, mais sont déterminées par un objet de vue. L'objet de vue implémente l'interface nsITreeView. La vue est interrogée pour les données à afficher dans l'arbre. Les arbres sont utilisées de différentes manières, comme montré dans la table ci-dessous. La deuxième colonne liste les interfaces disponibles via la propriété view
de l'arbre. La troisième colonne indique si l'élément treeitem
est utilisé.
Si vous désirez que l'arbre puisse défiler horizontalement, définissez simplement l'attribut width
pour chaque colonne de sorte que l'arbre soit plus large que son objet conteneur.
Type d'arbre | Interfaces de la vue | A des nœuds DOM ? | Description |
---|---|---|---|
Arbre de contenu | nsITreeView, nsITreeContentView | Oui | Cet arbre dispose d'éléments treeitem placés au sein de l'élément treechildren . Dans cette situation, une vue de contenu (qui implémente l'interface nsITreeContentView) qui est un type de vue plus spécialisé, utilise les éléments treeitem et leurs descendants pour déterminer les données à afficher dans l'arbre. Toutefois, les éléments treeitem ne sont pas affichés directement ; ils ne sont utilisés que comme données pour la vue de contenu. La vue de contenu mettra cependant automatiquement à jour l'arbre si les éléments treeitem sont modifiés. |
Arbre RDF | nsITreeView, nsIXULTreeBuilder | Non | Cet arbre est généré depuis une source de données RDF. Il est utilisé lorsqu'un arbre a un attribut datasources , ainsi que la valeur dont-build-content dans son attribut flags . Pour cet arbre, les données viennent directement de la source de données RDF. Aucun élément DOM treeitem n'est créé. Même si le template utilise des éléments treeitem pour définir le contenu, aucun nœud DOM correspondant ne sera créé. C'est le type à utiliser pour les arbres générés par RDF avec beaucoup de lignes. |
Arbre de contenu RDF | nsITreeView, nsIXULTreeBuilder, nsITreeContentView | Oui | Cet arbre est généré depuis une source de données RDF. Il est similaire au type précédent, mais est utilisé lorsque l'arbre n'a pas la valeur dont-build-content dans son attribut flags . Des éléments treeitem sont créés dans le DOM, afin de pouvoir y accéder à l'aide de fonctions RDF ou DOM. Ce type convient aux arbres générés par RDF qui n'ont pas beaucoup de lignes. |
Vue d'arbre personnalisée | nsITreeView | Non | Pour ce type d'arbre, vous implémentez vous-même l'interface nsITreeView. Les données de l'arbre sont obtenues depuis cette vue personnalisée. La vue personnalisée doit être attachée à l'arbre à l'aide de la propriété view . |
Vous trouverez plus d'informations dans le Tutoriel XUL. Consultez également Changements dans les contrôles d'arbres.
Recommandations d'accessibilité liées
|
- Attributs
- disableKeyNavigation, disabled, editable, enableColumnDrag, flags, hidecolumnpicker, onselect, rows, seltype, statedatasource, tabindex
- Propriétés
- accessibleType, builderView, columns, contentView, currentIndex, disableKeyNavigation, disabled, editingColumn, editingRow, enableColumnDrag, firstOrdinalColumn, inputField, selType, selstyle, tabIndex, treeBoxObject, view
Exemples
<tree flex="1"> <treecols> <treecol id="sender" label="Expéditeur" flex="1"/> <treecol id="subject" label="Sujet" flex="2"/> </treecols> <treechildren> <treeitem> <treerow> <treecell label="[email protected]"/> <treecell label="Plans top secrets"/> </treerow> </treeitem> <treeitem> <treerow> <treecell label="[email protected]"/> <treecell label="Allons manger quelque part"/> </treerow> </treeitem> </treechildren> </tree>
Un arbre avec des éléments imbriqués :
<tree id="myTree" flex="1" hidecolumnpicker="false" seltype="single" class="tree">
<treecols id="myTree2-treeCols">
<treecol id="myTree2-treeCol0" primary="true" flex="2" label="Colonne A"
persist="width" ordinal="1"/>
<splitter class="tree-splitter" ordinal="2"/>
<treecol id="myTree2-treeCol1" flex="1" label="Colonne B"
persist="width" ordinal="3"/>
</treecols>
<treechildren>
<treeitem>
<treerow>
<treecell label="1"/>
<treecell label="a"/>
</treerow>
</treeitem>
<!-- Assurez-vous de mettre container="true" -->
<treeitem container="true" open="true">
<treerow>
<treecell label="2"/>
<treecell label="b"/>
</treerow>
<treechildren>
<treeitem>
<treerow>
<treecell label="2a"/>
<treecell label="ba"/>
</treerow>
</treeitem>
</treechildren>
</treeitem>
</treechildren>
</tree>
Attributs
-
disabled
- Type : booléen
- Indique si l'élément est ou non désactivé. Si cette valeur est définie à
true
, l'élément est désactivé. Les éléments désactivés sont habituellement affichés avec leur texte grisé. Si l'élément est désactivé, il ne répond pas aux actions de l'utilisateur, il ne peut pas recevoir le focus, et l'évènementcommand
ne se déclenchera pas.
<!-- La case à cocher active/désactive le bouton --> <checkbox label="Enable button" onclick="document.getElementById('buttRemove').disabled = this.checked"/> <button id="buttRemove" label="Remove All" disabled="true"/>
-
flags
- Type : liste de valeurs (voir ci-dessous) séparées par des espaces
- Un ensemble de drapeaux destinés à différentes utilisations. Deux sont définis, et peuvent être la valeur de cet attribut.
-
dont-test-empty
: pour le contenu généré par des templates, le constructeur ne vérifiera pas qu'un conteneur est vide. -
dont-build-content
: peut être utilisé sur un arbre pour idniquer que les éléments de contenu ne doivent pas être générés. Cela améliorera les performances, mais vous ne pourrez pas utiliser les fonctions DOM pour obtenir les lignes de l'arbre.
-
rows
- Type : entier
- Le nombre de lignes à afficher dans l'élément. Si l'élément contient plus que ce nombre de lignes, une barre de défilement apparaitra afin que l'utilisateur puisse consulter les autres lignes. Pour obtenir le nombre réel de lignes dans l'élément, utilisez la méthode
getRowCount
.
-
seltype
<magic name="\"PAGENAME\"/"></magic> - Type : une des valeurs ci-dessous
- Utilisé pour indiquer si les sélections multiples sont permises.
single
: Seule une ligne peut être sélectionnée à la fois. (Valeur par défaut danslistbox
.)multiple
: Plusieurs lignes peuvent être sélectionnées à la fois. (Valeur par défaut danstree
.)
<magic name="\"PAGENAME\"/">Des cellules individuelles peuvent être sélectionnées.</magic><magic name="\"PAGENAME\"/"> Des lignes sont sélectionnées, cependant, l'indicateur de sélection n'est visible que sur le texte de la colonne principale.</magic>
-
tabindex
- Type : entier
- L'ordre de tabulation de l'élément. L'ordre de tabulation est l'ordre dans lequel le focus se déplace lorsque l'utilisateur appuie sur la touche « tab ». Les éléments dont le
tabindex
est plus haut se trouvent plus tard dans la séquence de tabulation.
Propriétés
-
accessibleType
- Type : entier
- Une valeur indiquant le type d'objet d'accessibilité pour l'élément.
Méthodes
Sujets liés
- Éléments
- treecols, treecol, treechildren, treeitem, treerow, treecell et treeseparator.
- Interfaces
- nsIAccessibleProvider, nsIDOMXULTreeElement, nsIDOMXULMultiSelectControlElement
Exemples de scripts
Pour alterner les couleurs de fond pour chaque ligne, utilisez des règles de styles comme les souvantes : 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; }
Si vous utilisez une vie d'arbre de contenu, utilisez le code suivant pour obtenir la valeur de l'attribut id de chacune des lignes sélectionnées de l'arbre : tcooper_mont at yahoo dot com
var rangeCount = 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(tree.view.getItemAtIndex(c).firstChild.id);
}
}
Le code qui soit renvoie un tableau des indices de lignes pour lesquelles la valeur est cochée dans une colonne de type checkbox : jfabre at ismans dot fr
function getCellChecked(tree, columnid)
{
var arr = [];
var column = tree.columns.getNamedColumn(columnid);
for (var i = 0; i < tree.view.rowCount; i++) {
if (tree.view.getCellValue(i, column) == 'true')
arr.push(i);
}
return arr;
}
Pour obtenir la valeur textuelle d'une colonne particulière (par exemple la colonne age) de la ligne ayant actuellement le focus dans l'arbre :
var t = document.getElementById('mytree');
document.title = t.view.getCellText(t.currentIndex, t.columns.getNamedColumn('age'));