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

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

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

实现细节

1. 导入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()

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 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.')
...

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 = 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()

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 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):
        ...

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