Please note, this is a STATIC archive of website developer.mozilla.org from 03 Nov 2016, cach3.com does not collect or store any user information, there is no "phishing" involved.

tree

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
  • Fournissez un accès alternatif (par exemple via des menus) aux sélecteurs de colonnes et pour les actions sur les en-têtes comme les tris (ceux-ci ne sont pas accessible au clavier par défaut).
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>
Image:trees1.png

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ènement command ne se déclenchera pas.


Image:XUL_ref_attr_disabled.png
<!-- 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 dans listbox.)
  • multiple : Plusieurs lignes peuvent être sélectionnées à la fois. (Valeur par défaut dans tree.)

<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.
disabled
Type : booléen
Obtient et définit la valeur de l'attribut disabled.
selType<magic name="\"PAGENAME\"/"></magic>
Type : chaîne de caractères
Obtient et définit la valeur de l'attribut seltype.

tabIndex
Type : entier
Obtient et définit la valeur de l'attribut tabindex.

Méthodes

Héritées de XUL element
blur, click, doCommand, focus, getElementsByAttribute

Héritées de DOM element
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()

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'));

Étiquettes et contributeurs liés au document

Étiquettes : 
 Contributeurs à cette page : lmorchard, BenoitL
 Dernière mise à jour par : lmorchard,