基于NiceGUI实现AgGrid数据定时保存至local storage及CSV导出功能

嘿，我来帮你搞定这两个需求！针对你用NiceGUI创建的AgGrid，这两个功能其实都不难实现，我给你一步步拆解：

1. 将AgGrid的修改数据保存到Local Storage #

要实现这个功能，我们需要监听AgGrid的单元格值变化事件，每次用户修改单元格后，就把最新的行数据同步到Local Storage里。另外，页面加载的时候还可以从Local Storage恢复之前保存的数据，这样刷新页面后修改不会丢失。

这里是完整的实现代码：

from nicegui import ui

# 从Local Storage读取保存的数据，没有的话用默认数据
def load_saved_data():
    saved_data = ui.storage.get('aggrid_row_data')
    return saved_data if saved_data is not None else [
        {'name': 'Alice', 'age': 18},
        {'name': 'Bob', 'age': 21},
        {'name': 'Carol', 'age': 42},
    ]

# 保存数据到Local Storage
def save_to_local_storage():
    ui.storage.set('aggrid_row_data', grid.options['rowData'])

# 初始化AgGrid
grid = ui.aggrid({
    'columnDefs': [
        {'headerName': 'Name', 'field': 'name', 'checkboxSelection': True},
        {'headerName': 'Age', 'field': 'age'},
    ],
    'rowData': load_saved_data(),
    'rowSelection': 'multiple',
}).classes('max-h-40')

# 监听单元格值变化事件，每次修改后自动保存
grid.on('cellValueChanged', lambda _: save_to_local_storage())

ui.run()

简单解释下：

• load_saved_data函数会先检查Local Storage里有没有保存的aggrid_row_data，有的话就用这个数据初始化表格，没有就用你原来的默认数据。
• save_to_local_storage函数把当前表格的rowData存到Local Storage中。
• 我们给AgGrid绑定了cellValueChanged事件，用户双击修改单元格后，这个事件会触发，自动调用保存函数。

2. 点击按钮导出当前数据为CSV文件 #

要实现CSV导出，我们需要先把当前的rowData转换成CSV格式的字符串，然后用NiceGUI的ui.download组件让用户下载这个文件。

在上面的代码基础上，我们添加导出按钮的功能：

import csv
from io import StringIO
from nicegui import ui

# （前面的load_saved_data、save_to_local_storage和grid初始化代码不变）

# 导出CSV的函数
def export_to_csv():
    # 获取当前表格的行数据
    row_data = grid.options['rowData']
    if not row_data:
        ui.notify('没有数据可以导出！')
        return
    
    # 创建CSV内容
    output = StringIO()
    writer = csv.writer(output)
    # 写入表头（取columnDefs里的headerName）
    headers = [col['headerName'] for col in grid.options['columnDefs']]
    writer.writerow(headers)
    # 写入行数据
    for row in row_data:
        writer.writerow([row[col['field']] for col in grid.options['columnDefs']])
    
    # 触发下载
    ui.download(content=output.getvalue(), filename='aggrid_data.csv', mime_type='text/csv')

# 添加导出按钮
ui.button('导出为CSV', on_click=export_to_csv)

ui.run()

简单解释下：

• export_to_csv函数先获取当前表格的rowData，如果为空就提示用户。
• 用Python的csv模块来生成CSV内容，先写表头（从columnDefs里的headerName获取），再逐行写入数据。
• 最后用ui.download让用户下载生成的CSV文件，文件名设为aggrid_data.csv。

把这两部分结合起来，就是完整的代码啦！你可以直接运行试试，修改单元格后刷新页面，数据会保留；点击按钮就能导出最新的CSV。

备注：内容来源于stack exchange，提问作者Yash Randive