Librairie tk › TreeView

1- Création de la 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

2- Nom 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

3- Ajouter du texte dans les cellules

Dans la première ligne nous allons ajouter le texte l1 C1 dans la ligne 1 colonne 1 et l1 c2 dans la ligne 1 colonne 2

.tree insert {} end -id 1 -values [list "l1 c1" "l1 C2"] -tags ttk

Faisons de même avec la ligne 2 :

.tree insert {} end -id 2 -values [list "l2 c1" "l2 c2"] -tags ttk

Ajoutons maintenant deux lignes dans lesquelles uniquement la colonne 0 sera remplie.

#ajouter un item à la fin dans la premiere colonne
.tree insert {} end -id widgets -text "index widget Tour" -tags ttk
.tree insert {} end -id b -text "index b" -tags ttk

Comme vous le remarquez, chaque ligne a un nom indiqué après l'option -id .

Pour comprendre plus précisément, effaçons maintenant la ligne dont l'id est widgets.

#effacer une ligne  (ici la ligne widgets)
.tree delete widgets

Changeons maintenant le nom et la taille de la colonne 2 nommée 'la deux':

#changement de taille et de nom de la colonne c2
.tree column c2 -width 100 -anchor center
.tree heading c2 -text "Size"

Enfin, essayons d'ajouter une ligne avec du texte dans la colonne 0 et de définir la couleur de fond de cette ligne en Jaune.

.tree insert "" end -text button -tags "ttk"
.tree tag configure ttk -background yellow

4- Réaction à un clic de souris.

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.

1) Creation de la treeview.

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]