Tkinter：使用ttk.Treeview高效展示数据库数据

# 假设这是从Supabase获取的response.data
# 实际应用中，您会使用supabase.table('pdvList').select('*').execute().data
mock_response_data = [
    {"id": 1, "name": "产品A", "price": 10.50, "stock": 100},
    {"id": 2, "name": "产品B", "price": 25.00, "stock": 50},
    {"id": 3, "name": "产品C", "price": 5.75, "stock": 200},
]

# 提取列名：通常取第一行数据的键作为列名
if mock_response_data:
    columns = list(mock_response_data[0].keys())
else:
    columns = [] # 处理数据为空的情况

import tkinter as tk
from tkinter import ttk

root = tk.Tk()
root.title("产品列表")
root.geometry("600x400")

# 创建Treeview，指定列名，并设置show="headings"只显示列标题，不显示默认的树状结构
tree = ttk.Treeview(root, columns=columns, show="headings")
tree.pack(expand=True, fill="both") # 使Treeview填充整个窗口

# 配置列标题和宽度
for col in columns:
    tree.heading(col, text=col.capitalize()) # 将列名首字母大写作为标题
    tree.column(col, width=100, anchor="center") # 设置列宽和居中对齐

# 示例：为特定列设置不同宽度
tree.column("id", width=50)
tree.column("name", width=150, anchor="w") # 产品名称左对齐

# 填充数据
for item in mock_response_data:
    # 将字典的值转换为列表，以匹配Treeview的values参数
    tree.insert("", "end", values=list(item.values()))

import tkinter as tk
from tkinter import ttk
# from supabase import create_client, Client # 实际使用时取消注释

# 模拟从Supabase获取的数据结构
# 实际应用中，您会使用以下代码获取数据：
# url: str = "YOUR_SUPABASE_URL"
# key: str = "YOUR_SUPABASE_ANON_KEY"
# supabase: Client = create_client(url, key)
# response = supabase.table('pdvList').select('*').execute()
# fetched_data = response.data if response.data else []

mock_response_data = [
    {"id": 1, "name": "产品A", "price": 10.50, "stock": 100},
    {"id": 2, "name": "产品B", "price": 25.00, "stock": 50},
    {"id": 3, "name": "产品C", "price": 5.75, "stock": 200},
    {"id": 4, "name": "产品D", "price": 12.00, "stock": 80},
    {"id": 5, "name": "产品E", "price": 30.00, "stock": 30},
]

# 提取列名
if mock_response_data:
    columns = list(mock_response_data[0].keys())
else:
    columns = []

# 创建主窗口
root = tk.Tk()
root.title("产品库存列表")
root.geometry("600x400")

# 创建Treeview
tree = ttk.Treeview(root, columns=columns, show="headings")
tree.pack(expand=True, fill="both", padx=10, pady=10) # 添加一些内边距

# 配置列标题和属性
for col in columns:
    tree.heading(col, text=col.replace('_', ' ').capitalize()) # 将下划线替换为空格并首字母大写
    tree.column(col, width=80, anchor="center")

# 针对特定列进行更精细的配置
tree.column("id", width=50)
tree.column("name", width=150, anchor="w") # 产品名称左对齐
tree.column("price", width=80, anchor="e") # 价格右对齐
tree.column("stock", width=80, anchor="e") # 库存右对齐

# 填充数据
for item in mock_response_data:
    tree.insert("", "end", values=list(item.values()))

# 添加滚动条 (如果数据超出可见区域)
vsb = ttk.Scrollbar(root, orient="vertical", command=tree.yview)
vsb.pack(side="right", fill="y")
tree.configure(yscrollcommand=vsb.set)

hsb = ttk.Scrollbar(root, orient="horizontal", command=tree.xview)
hsb.pack(side="bottom", fill="x")
tree.configure(xscrollcommand=hsb.set)

# 运行主循环
root.mainloop()