tkinter.ttk.Treeview
部件可以显示树形结构的数据, 但是该控件不支持内容编辑(/(ㄒoㄒ)/~~), 所以决定自己动手实现此功能. 实现后的效果如下图所示.
该代码可以从我的github 仓库中下载.
实现细节
- 导入
Mainwindow
模块(参见: tkinter开发实例: 主窗体), 创建一个空白窗体Demo
类并继承自Mainwindow
.
from mainwindow import Mainwindow
from tkinter import *
from tkinter import ttk
class Demo(Mainwindow):
def __init__(self):
super().__init__()
# set window's title.
self.title('Demo')
# set window's geometry size
self.geometry('600x400')
self.showmessage('Ready.')
if __name__ == '__main__':
mw = Demo()
mw.mainloop()
- 在
Demo
的__init__()
函数中创建一个ttk.Treeview
对象, 并放置到Mainwindow.mainframe
部件的网格布局中. (代码见下一步) - 在
Demo
中添加self.delegate_var = StringVar()
,self.delegate_var
用于绑定到代理部件.
...
class Demo(Mainwindow):
def __init__(self):
super().__init__()
# set window's title.
self.title('Demo')
# set window's geometry size
self.geometry('600x400')
# 创建 self.tree 并添加到 self.mainframe 中
self.tree = ttk.Treeview(self.mainframe)
self.tree.grid(column=0, row=0, sticky=NSEW)
self.mainframe.rowconfigure(0, weight=1)
self.mainframe.columnconfigure(0,weight=1)
# 创建`self.delegate_var`用于绑定代理部件
self.delegate_var = StringVar()
self.showmessage('Ready.')
...
- 我们在
Demo
类中添加一个init_tree()
函数, 用于初始化tree
中的内容.
...
class Demo(Mainwindow):
def __init__(self):
...
# TODO: 添加 init_tree(), 用于初始化`self.tree`中的内容.
def init_tree(self):
# (列标题, 宽度, 对齐方式)
self.cols = {
'name': ('Name', 100, W),
'age': ('Age', 100, W),
'gender': ('Gender', 100, W),
}
self.tree['columns'] = tuple(self.cols.keys())
for k, v in self.cols.items():
self.tree.column(k, width=v[1], anchor=v[2])
self.tree.heading(k, text=v[0])
self.items = {}
self.items['name'] = self.tree.insert('', 'end', text='1001', values=('Ada', '18','female'))
self.items['name'] = self.tree.insert('', 'end', text='1002', values=('bob', '19','male'))
self.items['name'] = self.tree.insert('', 'end', text='1003', values=('jack', '22','male'))
- 在
Demo
类中添加tree_item_edit()
函数, 用于响应self.tree
的<Double-1>
事件.
...
class Demo(Mainwindow):
def __init__(self):
...
def init_tree(self):
...
def tree_item_edit(self, e: Event):
# 获取选中的项目
self.selected_item = self.tree.selection()[0]
for i, col in enumerate(self.tree['columns']):
# 获取选中项目中每列的x偏移, y偏移, 宽度 和 高度
x, y, w, h = self.tree.bbox(self.selected_item, col)
# 判断鼠标点击事件的位置, 是否在选中项目的某列中
if x < e.x < x + w and y < e.y < y + h:
self.selected_column = col
text = self.tree.item(self.selected_item, 'values')[i]
break
else:
# 鼠标点击位置不在数据列中
self.selected_column = None
# 获取该项目的x偏移, y偏移, 宽度 和 高度
x, y, w, h = self.tree.bbox(self.selected_item)
text = self.tree.item(self.selected_item, 'text')
# 设置 `self.delegate_var` 的值
self.delegate_var.set(text)
# 根据选择的列, 使用不同的代理部件
if self.selected_column == 'gender':
self.delegate_widget = ttk.Combobox(self.tree, width=w // 8, textvariable=self.delegate_var, values=('male', 'female'))
# 为 `<<ComboboxSelected>>`事件绑定处理函数
self.delegate_widget.bind('<<ComboboxSelected>>', self.tree_item_edit_done)
# 为 释放焦点 `<FocusOut>` 事件绑定处理函数, 下同
self.delegate_widget.bind('<FocusOut>', func=self.tree_item_edit_done)
elif self.selected_column == 'age':
self.delegate_widget = ttk.Spinbox(self.tree, width=w // 8, textvariable=self.delegate_var, from_=1, to=100)
self.delegate_widget.bind('<FocusOut>', func=self.tree_item_edit_done)
else:
self.delegate_widget = ttk.Entry(self.tree, width=w // 8, textvariable=self.delegate_var)
self.delegate_widget.bind('<FocusOut>', func=self.tree_item_edit_done)
# 将 self.delegate_widget 放到 `self.tree` 的网格布局中, `padx` 和 `pady` 分别给选中单元格的 `x` 偏移 和 `y` 偏移
self.delegate_widget.grid(padx=x, pady=y)
self.delegate_widget.focus()
- 在
Demo
类中添加tree_item_edit_done()
函数, 用于响应<FocusOut>
事件. 当释放焦点时, 执行此函数.
...
class Demo(Mainwindow):
def __init__(self):
...
def init_tree(self):
...
def tree_item_edit(self, e: Event):
...
def tree_item_edit_done(self, e):
# 将`self.delegate_widget`从`self.tree`的网格布局中移除
self.delegate_widget.grid_forget()
if self.selected_column is None:
# 为`self.tree`的选中项目的文本设置 `self.delegate_var`的值
self.tree.item(self.selected_item, text=self.delegate_var.get())
else:
# 为`self.tree`的选中项目的选中列设置 `self.delegate_var`的值
self.tree.set(self.selected_item, self.selected_column, self.delegate_var.get())
- 最后, 在
Demo
类的__init__()
函数中添加self.tree.bind('<Double-1>', func=self.tree_item_edit)
, 将self.tree_item_edit()
函数绑定到self.tree
的<Double-1>
事件上.
...
class Demo(Mainwindow):
def __init__(self):
super().__init__()
# set window's title.
self.title('Demo')
# set window's geometry size
self.geometry('600x400')
self.tree = ttk.Treeview(self.mainframe)
self.tree.grid(column=0, row=0, sticky=NSEW)
self.mainframe.rowconfigure(0, weight=1)
self.mainframe.columnconfigure(0,weight=1)
self.init_tree()
self.delegate_var = StringVar()
# 将`self.tree_item_edit()`函数绑定到`self.tree`的`<Double-1>`事件上.
self.tree.bind('<Double-1>', func=self.tree_item_edit)
self.showmessage('Ready.')
def init_tree(self):
...
def tree_item_edit(self, e: Event):
...
def tree_item_edit_done(self, e):
...
感谢大家的阅读!! 如果你有更好的实现方式, 欢迎评论留言!!