tree

Table des matières

« 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="pat@example.com"/>
        <treecell label="Plans top secrets"/>
      </treerow>
    </treeitem>
    <treeitem>
      <treerow>
        <treecell label="mel@example.com"/>
        <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

Hérités de XUL element
align , allowevents , allownegativeassertions , class , coalesceduplicatearcs , collapsed , container , containment , context , contextmenu , datasources , dir , empty , equalsize , flags , flex , height , hidden , id , insertafter , insertbefore , left , maxheight , maxwidth , menu , minheight , minwidth , mousethrough , observes , ordinal , orient , pack , persist , popup , position , preference-editable , querytype , ref , removeelement , sortDirection , sortResource , sortResource2 , statustext , style , template , tooltip , tooltiptext , top , uri , wait-cursor , width

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"/>

disableKeyNavigation tree.editable enableColumnDrag

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.

hidecolumnpicker tree.onselect

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 /dl/dt/span[2], line 1, column 55: ")" expected: 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.)

/p/span, line 1, column 55: ")" expected /p/span[2], line 1, column 55: ")" expected

statedatasource

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

Héritées de XUL element
align , allowEvents , boxObject , builder , className , collapsed , contextMenu , controllers , currentItem , database , datasources , dir , flex , height , hidden , id , left , listBoxObject , maxHeight , maxWidth , menu , minHeight , minWidth , observes , ordinal , orient , pack , persist , ref , resource , statusText , style , tooltip , tooltipText , top , value , width

Héritées de DOM element
attributes , childNodes , cloneNode , firstChild , lastChild , localName , namespaceURI , nextSibling , nodeName , nodeType , nodeValue , ownerDocument , parentNode , prefix , previousSibling , tagName

accessibleType: Type : entier; Une valeur indiquant le type d'objet d'accessibilité pour l'élément.

builderView columns contentView currentIndex

disabled: Type : booléen; Obtient et définit la valeur de l'attribut disabled .

disableKeyNavigation editingColumn editingRow enableColumnDrag firstOrdinalColumn tree.inputField

selType /dl/dt/span[2], line 1, column 55: ")" expected: Type : chaîne de caractères; Obtient et définit la valeur de l'attribut seltype .

selstyle

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

treeBoxObject view

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

startEditing stopEditing

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

Récupéré depuis "http://developer.mozilla.org/Fr/XUL/Tree"

Languages

Page modifiée à 15:24, 15 Jul 2008 par BenoitL

Tags:

Fichiers (0)

Content is available under these licenses

About MDC

Propulsé par MindTouch Deki Enterprise Edition