7.5 Selection dans les arbres

Cette section décrit comment obtenir et modifier les objets sélectionnés dans un arbre.

Accéder aux items sélectionnés d'un arbre

Chaque élément treeitem d'un arbre peut être sélectionné individuellement. Si vous ajoutez l'attribut seltype à l'arbre en lui attribuant la valeur multiple , l'utilisateur pourra sélectionner plusieurs objets en même temps. La sélection n'est pas nécéssairement contigue. L'arbre met à disposition de nombreuses fonctions qui peuvent être utilisées pour déterminer si un objet est sélectionné.

D'abord, voyons comment nous pouvons déterminer qu'un objet est sélectionné. Le gestionnaire d'évènement onselect peut être ajouté à l'élément tree. Lorsque l'utilisateur sélectionne un objet de l'arbre, le gestionnaire d'évènement est appelé. L'utilisateur peut également changer la sélection en utilisant les touches de déplacement. Si l'utilisateur appuie en continu sur une touche de déplacement afin de se déplacer rapidement dans les objets, le gestionnaire d'évènement n'est pas appelé jusqu'à ce que l'utilisateur arrête d'appuyer sur la touche. Cela conduit à améliorer les performances. Cela signifie également que l'illumination du texte apparaîtra sur plusieurs objets même si l'évènement select n'est pas déclenché pour ces objets.

La syntaxe du gestionnaire d'évènement onselect est présentée ci-dessous.

<tree id="treeset" onselect="alert('Vous avez sélectionné quelquechose!');">

L'arbre possède une propriété currentIndex, qui peut être utilisée pour atteindre l'objet sélectionné, où la première ligne est 0. Vous pouvez changer l'objet sélectionné en attribuant une nouvelle valeur à cette propriété.

Les éléments fils sont inclus dans le comptage juste après leurs parents. Cela signifie que s'il y a trois objets racines et que chacun a deux objets fils, il y aura un total de six objets. Le premier objet (à l'index 0) sera le premier objet racine. L'objet suivant à l'index 1 sera son premier fils. Le second fils sera à l'index 2 et le second objet parent sera à la postion 3 et ainsi de suite.

Dans l'image située à droite, il y a huit lignes affichées, dont deux sont sélectionnées. La première ligne sélectionnée a un index de 4 et la seconde, un index de 7. Les lignes qui ne sont pas affichées ne sont pas incluses dans le comptage d'index.

Pour les arbres qui permettent une sélection multiple, obtenir la liste des lignes sélectionnées est un peu plus compliqué. L'élément tree a une propriété view laquelle dispose d'une propriété selection qui contient des propriétés et des méthodes liées à la sélection courante de l'arbre . Vous pouvez utiliser ces méthodes pour récupérer le jeu d'objet sélectionnés ou pour modifier la sélection.

Comme les objets sélectionnés dans une sélection multiple ne sont pas nécéssairement contigus, vous pouvez récupérer chaque bloc de sélection contigue en utilisant les fonction getRangeCount et getRangeAt. La première fonction retourne le nombre de plages de sélection qu'il y a. Si une seule valeur est sélectionnée, la valeur retournée sera 1. Vous pourrez alors écrire une boucle pour le nombre de plage, en appelant getRangeAt pour obtenir les bons index du début et de la fin de la plage.

La fonction getRangeAt comporte trois arguments. Le premier est la plage d'index. Le second est un objet qui sera rempli par la fonction avec l'index du premier objet sélectionné. Le troisième argument est un objet qui sera rempli avec l'index du dernier objet sélectionné.

Par exemple :

var start = new Object();
var end = new Object();
var numRanges = tree.view.selection.getRangeCount();

for (var t=0; t<numRanges; t++){
  tree.view.selection.getRangeAt(t,start,end);
  for (var v=start.value; v<=end.value; v++){
    alert("Objet "+v+" sélectionné.");
  }
}

Nous avons créé deux objet appelés start et end. Ensuite, nous lancons une boucle sur les plages de sélection dont le nombre a été retourné par la fonction getRangeCount. La fonction getRangeAt est appelée avec la plage d'index et les objets start et end. Cette fonction remplira les index start et end en leur attribuant la propriété value. Donc, si la première plage commence au troisième objet et se termine au septième, start.value vaudra 2 (souvenez-vous que les index commencent à 0, donc nous en enlevons un) et end.value vaudra 6. Une alerte est affichée pour chaque index.

---

Nous allons maintenant apprendre comment créer une vue personnalisée pour un arbre.