Librairie tk › TreeView

Nous allons utilser une Treeview pour afficher des données à la manière d'une gridview ou columnview présent dans d'autres langages de programmation, c'est à dire sans arborescence, comme une simple grille excel par exemple.

Pour créer la TreeView écrivons ceci:

ttk::treeview .tree -columns "c1 c2" -displaycolumns "c1 c2"  -selectmode none

Ne pas oublier de mettre un pack pour afficher la treeview dans votre fenêtre :

pack .tree

A retenir :

• Le nom des colonnes ici est #0, c1 et c2
• selectmode none dit qu'on sélectionne dans un mode simple et non multicolonne

AJOUTER DES COLONNES

Nous allons créer une table  avec 3 colonnes:

• id
• la une
• size

Les colonnes sont organisées de la gauche vers la droite en commencant par 0, 1, 2 etc...

Ecrivons ceci :

# pour afficher le nom de la colonne 0 ecrire ceci :
.tree heading #0 -text "id" -anchor center

# Affichage du reste des colonnes par leur id
.tree heading c1 -text "la une"  -anchor center
.tree heading c2 -text "la deux" -anchor center

Le nom de la première colonne est #0, celui de la 2eme est c1.

Notez que nous aurions pu écrire à la place de

.tree heading c1 -text "la une"  -anchor center

le code suivant :

.tree heading #1 -text "la une"  -anchor center

cela fonctionne aussi.

Ajustons la taille de la colonne 0 comme ceci :

#reglage de la largeur de la premiere colonne
.tree column #0 -width 50

Je n'ai pas parlé de l'option -tags "ttk"

C'est tout simplement un tag qui vous permet de manipuler les évènements de la souris.

Par exemple, pour récupérer le nom de la ligne (l'id) par un clic gauche écrivons ceci :

# retourne le nom du tag de la ligne
.tree tag bind ttk <1> { puts [.tree tag names]}

Remarque:  Noud aurions pu écrire ce code qui produit le même résultat au relachement du clic gauche.

#retourne le nom du tag de la ligne
.tree tag bind ttk  { puts [%W identify item %x %y]}

Cet exemple est issu de TKsociété, le logiciel pour la gestion d'une TPME sur lequel je travaille actuellement.

Nous allons créer une treeview pour la gestion de contacts avec 6 colonnes  comme ceci :

pack [ttk::treeview .n.o1.tv1 -columns "A B C D E F" -displaycolumns "A B C D E F" -selectmode none ] -fill both -expand 1
.n.o1.tv1 column #0 -width 50
.n.o1.tv1 column #1 -width 50 -anchor center
.n.o1.tv1 column #2 -anchor center

.n.o1.tv1 heading A -text "ID"
.n.o1.tv1 heading B -text "Société"
.n.o1.tv1 heading C -text "Nom"
.n.o1.tv1 heading D -text "Prénom"
.n.o1.tv1 heading E -text "Portable"
.n.o1.tv1 heading F -text "Email"

Pour ajouter les valeurs de la base de données contact.dat présente sur le tuto ici, voici comment faire :

# Ajout des données contact.dat dans la liste
sqlite3 db1 ./contact.dat
set mescontacts [db1 eval {SELECT * FROM contact ORDER BY id } {
	.n.o1.tv1 insert {} end -id $id -values [list "$id" "$societe" "$nom" "$prenom" "$port" "$email" ] -tags ttk
	} ]
db1 close	

# clic sur une ligne dans la treeview et recuperation de l'id
.n.o1.tv1 tag bind ttk <1> {set monid [%W identify item %x %y]
	puts [%W identify item %x %y]}
}

Lors d'un clic sur une ligne le code:

[%W identify item %x %y]

récupère l'id de la colonne.

Pour effacer une ligne sélectionnée:

Si une ligne est sélectionnée, il suffit de faire :

.tree delete [.tree selection]

Pour Effacer toutes les lignes de la Treeview :

.tree delete [.tree children {}]

Si votre widget s'appelle .tree

Pour Effacer plusieurs lignes sélectionnées, c'est la même chose qu'une ligne :

.tree delete [.tree selection]

Je viens de comprendre comment utiliser les lignes dans une treeview sans passer par des noeuds comme une liste treeview.

pour afficher dans une ligne a la colonne 0 le texte 'bonjour', a la colonne 2 le texte 'c'estmoi' il suffit d'utiliser l'option text pour la premiere colonne et l'option values pour les autres colonnes comme ceci :

.matreeview insert {} 0 -id 1 -text "bonjour" -values "c'estmoi"

voici le resultat a l'ecran :

Si il a plusieurs colonne il suffit de mettre dans values la liste des valeurs de la colonne 1 a la colonne x comme ceci :

.matreeview insert {} 0 -id 1 -text "bonjour" -values [list "c'estmoi" "qui" "paye"]

La modification d'une ligne s'effectue en deux temps :

1. Recuperation de la ligne a modifier
2. Modification du texte

Exemple 1

Je souhaite lors d'un double clic modifier le texte de la colonne 0 par le mot 'hello'

recuperons l'id de la ligne par la commande bind :

.matreeview tag bind ttb <Double-1> {set hoho [.fp.p.tvpr selection]}

.fp.p.tvpr item $hoho -text "hello"

Exemple 2

Je souhaite lors d'un souble clic modifier le texte de la colonne 1 par le mot 'lala'

recuperons l'id de la ligne par la commande bind :

.matreeview tag bind ttb <Double-1> {set hoho [.fp.p.tvpr selection]}

.fp.p.tvpr item $hoho -values "lala"

Pour deplier un noeud, il suffit d'utiliser la sous commande de ITEM aui s'appelle open comme ceci :

.matreeviem  item 0 -open true

commentons ce code :

Un noeud est present sous l'id '0' . je demande donc de deplier le noeud nomme 0

Pour le replier il suffit de passer l'option open a false.

la selection de la ligne se fait par la commande :

.matreeview selection set $monid

Pour changer la couleur de fond  de la treeview ou le texte , il faut ecrire juste apres avoir cree notre treeview :

ttk::style configure Treeview -fieldbackground lightblue -foreground black

.matreeview tag configure "nomdutag" -background "red"

.matreeview insert "" end -id idnoeud -text "hello"  -tags nomdutag

.matreeview  item configure 3 -tags "nomdutag"

Si je souhaite cliquer dans la treeview mais en dehors des lignes pour deselectionner toutes les lignes voici comment faire :

• Recuperer le clic dans un bind
• lors de ce click lancer la procedure handle_click
• Obtenir les coordonnes du click pour sqvoir si on pointe sur une ligne ou dans le reste de l'espace affiche par la treeview
• deselectionner toutes les lignes si on est en dehors d'une ligne

# Fonction pour gérer le clic dans le Treeview
proc handle_click {tree event} {
    # Obtenir les coordonnées du clic
    set x [event x $event]
    set y [event y $event]

    # Vérifier si le clic est en dehors des lignes
    set item [$tree identify row $y]
    if {$item eq ""} {
        puts "Clic en dehors des lignes"
        # Vous pouvez ajouter ici le code pour désélectionner toutes les lignes ou effectuer une autre action
        $tree selection remove $tree selection
    } else {
        puts "Clic sur l'élément: $item"
    }
}

# Lier l'événement de clic gauche à la fonction handle_click
bind $tree <Button-1> [list handle_click $tree %W]

Vous l'aurez compris, pour deselectionner toutes les lignes on utilise l'option remove (ligne en rouge dans l'exemple)

Pour aller plus loin :

  Documentation officielle de la treeview

  Retourn a la librairie Tk

  Retour a l'accueil