Tkinter Treeview Tutorial
Treeview is a control of tkinter.ttk that provides a multi-column display, which we can call Treeview. The left column can also be designed as a tree or a hierarchy, where the user can show or hide any part of it, and the leftmost column is called the icon column.
The basic idea of designing a Treeview control is to create a Treeview object using the Treeview constructor.
The syntax of Treeview is as follows.
Treeview(master, options, ...)
The first parameter of the Treeview( ) method is the parent object, indicating which parent object this Treeview will be built in. The following are the other commonly used options parameters within the Treeview( ) method.
(If you set columns=("Name", "Age"), the control has three columns, the first is the leftmost icon column, which can be expanded (expand) or hidden (collapse), and the other two columns are Name and Age.
(2) cursor
: You can set the appearance of the cursor on this control.
(3) displaycolumns
: You can set the display order of the columns.
- If the parameter is "#all", it means that all columns are displayed and the columns are displayed in the order they are created.
- If you set columns=("Name", "Age", "Date"), you need to insert the elements in order when you use insert( ) to insert the elements. The same situation if you use columns(2,0), (2,0) is the entity index, the icon column is at the top, followed by the Date column, then the Name column. This condition can also be written as columns=("Date", "Name")
(4) height
: the height of each row of the control.
(5) padding
: you can use 1 to 4 parameters to set the spacing between the content and the control box, its rules are as follows.
Value | Left | Top | Right | Bottom |
---|---|---|---|---|
a | a | a | a | a |
ab | a | b | a | b |
abc | a | c | b | c |
abcd | a | b | c | d |
(6) selectmode
: the way the user can select items with the mouse.
- selectmode=BROWSE, select one item at a time, which is the default.
- selectmode=EXTENDED, multiple items can be selected at once.
- selectmode=NONE, the selection cannot be executed with the mouse.
(7) show: The default is to set the label show="tree" to display the icon bar, if omitted, the icon bar is displayed, if set to show="headings", the icon bar is not displayed.
(8) takefocus: the default is True, if you do not want to be accessed can be set to False.
More rules are explained below with examples.
Example#1
Simple build of Treeview widget application.
from tkinter import *
from tkinter.ttk import *
root = Tk()
root.title("apidemos.com")
# Create Treeview
tree = Treeview(root,columns="cities") # tree = Treeview(root,columns=("cities"))
# Create column headings
tree.heading("#0",text="State") # Icon bar
tree.heading("#1",text="City")
# Create Content
tree.insert("",index=END,text="Eleanor",values="Chicago")
tree.insert("",index=END,text="California",values="Los Angeles")
tree.insert("",index=END,text="Tokyo",values="Houston")
tree.pack()
root.mainloop()
Output:
It is recommended that the reader click on the selection to experience the basic operation of Treeview. The figure below on the right is a demonstration output of the click on the selection.
Line 9 of the above program creates a Treeview control, the name of which is tree. This control has one column, the domain name is cities, and the future programming can use the cities to represent this one column. After this setting, we can know that this multi-column form has two columns, in addition to cities, there is another icon column on the left.
Lines 11 and 12 of the program use the heading( ) method, in which the column headings are created, where the first parameter "#0" refers to the leftmost icon column, and "#1" refers to the first column, so these two lines create two column headings.
Lines 14 to 16 of the program use insert( ) method to insert the content of the Treeview control, the first parameter in this method "", on behalf of the parent id, because the icon column can have a tree structure in the future, so there is this one column design, later there will be an example to explain. When the column built is the topmost level, it can be handled with "" empty string. The second parameter index=END stands for inserting the information into the end of the Treeview, it has the same idea as END of the Text control. The third parameter text is to set the content of the icon bar. The fourth parameter values is to set the content of the City column.
Example#2
Adding show="headings" parameter when creating a Treeview control will not show the icon bar.
from tkinter import *
from tkinter.ttk import *
root = Tk()
root.title("apidemos.com")
# Create Treeview
tree = Treeview(root,columns=("cities"),show="headings")
# Create column headings
tree.heading("#0",text="State") # Icon bar
tree.heading("#1",text="City")
# Create Content
tree.insert("",index=END,text="Eleanor",values="Chicago")
tree.insert("",index=END,text="California",values="LosAngeles")
tree.insert("",index=END,text="Tokyo",values="Houston")
tree.pack()
root.mainloop()
Output:
Example#3
Example 1, line 9, columns=("cities"), pointing out that the column title name is cities, we can use this string to represent the columns. In line 12, "#1" is used to represent the cities column, in fact, we can use this "cities" instead of "#1".
from tkinter import *
from tkinter.ttk import *
root = Tk()
root.title("apidemos.com")
# Create Treeview
tree = Treeview(root,columns=("cities"))
# Create column headings
tree.heading("#0",text="State") # Icon bar
tree.heading("cities",text="City")
# Create Content
tree.insert("",index=END,text="Eleanor",values="Chicago")
tree.insert("",index=END,text="California",values="LosAngeles")
tree.insert("",index=END,text="Tokyo",values="Houston")
tree.pack()
root.mainloop()
Output:
In Example#1, line 14 of the insert( ) method, the fourth parameter values is to set the inserted content, the above because there is only one column in addition to the icon column, so just set values equal to the content of the string, if there are more than one column, you must use values = (value1, value2, …), if the number of content set is too small, the other columns will be blank, if the number of content set is too much, the extra content will be discarded.
Example#4
Add the field of population, where the unit of population is 10,000 people.
from tkinter import *
from tkinter.ttk import *
root = Tk()
root.title("apidemos.com")
# Create Treeview
tree = Treeview(root,columns=("cities","populations"))
# Create column headings
tree.heading("#0",text="State")
tree.heading("#1",text="City")
tree.heading("#2",text="Populations")
# Create Content
tree.insert("",index=END,text="Eleanor",values=("Chicago","800"))
tree.insert("",index=END,text="California",values=("LosAngeles","1000"))
tree.insert("",index=END,text="Tokyo",values=("Houston","900"))
tree.pack()
root.mainloop()
Output:
From the above execution result below, we again emphasize the usage of insert() method.
(1) text
: Set the content of the icon column.
(2) values
: set the content of the general column, values=("Chicago", "800"), this is to set the column in a sequential way, "Chicago" is the first column, "800" is the second column.
In fact, once we understand the contents of the values parameter above, we can also apply Python’s list to create the column contents.
Example#5
To create column contents using the list method, the reader should learn lines 8 to 10 to set the list contents, and lines 18 to 20 to apply the list to the values parameter of the insert( ) method.
from tkinter import *
from tkinter.ttk import *
root = Tk()
root.title("apidemos.com")
tuple1 = ("Chicago","800") # Set column content as a tuple
list2 = ["LosAngeles","1000"] # Set column content as a list
list3 = ["Houston","900"] # Set column content as a list
# Create Treeview
tree = Treeview(root,columns=("cities","populations"))
# Create column headings
tree.heading("#0",text="State") # Icon bar
tree.heading("#1",text="City")
tree.heading("#2",text="Populations")
# Create content
tree.insert("",index=END,text="Eleanor",values=tuple1) # You can also use a tuple instead
tree.insert("",index=END,text="California",values=list2)
tree.insert("",index=END,text="Tokyo",values=list2)
tree.pack()
root.mainloop()
Output:
The above program uses a list to build the contents of the values parameter of the insert( ) method, or you can use a tuple instead, with the same effect.