tkinter.ttk.Treeview 双击编辑功能的实现

tkinter.ttk.Treeview部件可以显示树形结构的数据, 但是该控件不支持内容编辑(/(ㄒoㄒ)/~~), 所以决定自己动手实现此功能. 实现后的效果如下图所示.

该代码可以从我的github 仓库中下载.

实现细节

1. 导入Mainwindow模块(参见: tkinter开发实例: 主窗体), 创建一个空白窗体Demo类并继承自Mainwindow.

from mainwindow import Mainwindow
from tkinter import *
from tkinter import ttkclass Demo(Mainwindow):def __init__(self):super().__init__()# set window's title.self.title('Demo')# set window's geometry sizeself.geometry('600x400')self.showmessage('Ready.')if __name__ == '__main__':mw = Demo()mw.mainloop()

2. 在Demo的 __init__() 函数中创建一个ttk.Treeview对象, 并放置到Mainwindow.mainframe 部件的网格布局中. (代码见下一步)
3. 在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 sizeself.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.')
...

4. 我们在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'))

5. 在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 = coltext = self.tree.item(self.selected_item, 'values')[i]breakelse:# 鼠标点击位置不在数据列中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()

6. 在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())

7. 最后, 在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 sizeself.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):...

感谢大家的阅读!! 如果你有更好的实现方式, 欢迎评论留言!!