Vos résultats de recherche

tree

Dans cet article

« Accueil de la référence XUL [ Exemples | Attributs | Propriétés | Méthodes | Sujets liés ]

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>

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.

<!-- 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 :

Éléments_XUL

Contributeurs à cette page : lmorchard, BenoitL

Dernière mise à jour par : lmorchard, 14 juin 2012 à 18:12:09