尧图网站建设 
NiceGUI 可编辑 AG Grid 实战构建支持增、删、改行的数据表格【免费下载链接】niceguiCreate web-based user interfaces with Python. The nice way.项目地址: https://gitcode.com/GitHub_Trending/ni/nicegui导读本指南以 NiceGUI 仓库中的 examples/editable_ag_grid 示例为核心完整讲解如何基于ui.aggrid构建一个支持新增行、单元格内联编辑、批量删除选中行的数据表格并深入源码剖析options数据同步、事件转发与行选择 API 的底层机制。读完本文你将能够在自己的 NiceGUI 应用中复现一个开箱即用的可编辑表格并掌握让服务端数据与前端网格保持一致的关键技巧。示例总览AG Grid 是功能强大的 JavaScript 数据网格库NiceGUI 通过ui.aggrid元素将其封装为 Python 组件全部网格配置以字典形式传入Python 端通过操作options字典与浏览器端保持同步。本文对应的完整示例位于 examples/editable_ag_grid/main.py运行方式与仓库中其他示例一致python main.py启动后浏览器打开 NiceGUI 默认地址通常为http://localhost:8080即可看到下图所示的表格界面示例实现了三项核心能力双击单元格修改数据、点击New row追加行、选中若干行后点击Delete selected批量删除每一步操作都会通过ui.notify在页面右上角给出反馈。一、构建可编辑网格从一段核心配置开始先看示例中创建网格的部分main.pyaggrid ui.aggrid({ columnDefs: [ {field: name, editable: True, sortable: True}, {field: age, editable: True}, {field: id}, ], rowData: [ {id: 0, name: Alice, age: 18}, {id: 1, name: Bob, age: 21}, {id: 2, name: Carol, age: 20}, ], rowSelection: {mode: multiRow}, stopEditingWhenCellsLoseFocus: True, }).on(cellValueChanged, handle_cell_value_change)对配置项逐一说明配置键作用示例值说明columnDefs定义列及每列的属性editable: True开启单元格编辑sortable: True允许点击表头排序id列不编辑、仅作行标识rowData网格初始数据列表中的每个字典对应一行这里初始化了三行数据rowSelection行选择模式{mode: multiRow}表示支持多行选择同时选中多行stopEditingWhenCellsLoseFocus编辑状态控制置True后单元格在失去焦点时即结束编辑并提交新值其中stopEditingWhenCellsLoseFocus值得特别留意。从 aggrid.py 的文档注释可以看到编辑中的单元格只有在退出编辑模式后其数据才会被回传——而失去焦点即退出编辑这个行为必须显式开启。若不设置该项用户点击网格外区域时编辑不会结束服务端可能一直拿不到新值。二、三种行操作新增、编辑、删除的完整实现2.1 新增行add_rowdef add_row(): new_id max((dx[id] for dx in aggrid.options[rowData]), default-1) 1 aggrid.options[rowData].append({id: new_id, name: New name, age: None}) ui.notify(fAdded row with ID {new_id})关键点直接修改aggrid.options[rowData]这个列表。options是AgGrid暴露的受监控字典见源码 aggrid.py对其中数据的修改会被 NiceGUI 检测到并自动推送到浏览器端刷新网格。新增行时用max(...) 1生成自增id保证新行 id 不与现有行冲突。补充options字典在创建时还会被自动注入theme默认quartz等字段详见 aggrid.pyauto_size_columns未显式设置时会按列不使用flex则自动撑满网格宽度的规则生成autoSizeStrategy。2.2 单元格编辑与事件回传handle_cell_value_changedef handle_cell_value_change(e): new_row e.args[data] ui.notify(fUpdated row to: {e.args[data]}) aggrid.options[rowData][:] [row | new_row if row[id] new_row[id] else row for row in aggrid.options[rowData]]用户编辑完成后触发cellValueChanged事件事件对象e.args中包含 AG Grid 回传的整行数据data字段。回调中做两件事用ui.notify给出编辑反馈用编辑后的新行数据替换rowData中 id 匹配的旧行——row | new_row是 Python 3.9 的字典合并语法new_row的字段会覆盖旧行同名字段。通过切片赋值rowData[:] ...原地更新列表确保网格能感知变更并刷新。这一事件驱动 回写 options的模式正是可编辑网格保持前后端数据一致性的核心套路。2.3 删除选中行delete_selectedasync def delete_selected(): selected_id [row[id] for row in await aggrid.get_selected_rows()] aggrid.options[rowData][:] [row for row in aggrid.options[rowData] if row[id] not in selected_id] ui.notify(fDeleted row with ID {selected_id})删除操作分两步await aggrid.get_selected_rows()从浏览器端取回当前所有选中行的数据用列表推导式过滤掉 id 在选中集合中的行再通过切片赋值写回rowData。get_selected_rows是AgGrid提供的内置异步方法其实现位于 aggrid.py底层调用 AG Grid API 的getSelectedRows方法配套的get_selected_rowaggrid.py则在单行选择模式下返回第一行或None。官方测试 tests/test_aggrid.py 对多选与单选两种取回方式均有验证。最后两个按钮把三个操作串起来ui.button(Delete selected, on_clickdelete_selected) ui.button(New row, on_clickadd_row)三、源码原理事件如何从浏览器到达 Python示例中.on(cellValueChanged, handle_cell_value_change)能生效依赖 NiceGUI 为 AG Grid 建立的事件转发链路。从 aggrid.js 可以看到网格创建后立即注册了全局监听器this.api AgGrid.createGrid(this.$el, this.gridOptions); this.api.addGlobalListener(this.handle_event);handle_eventaggrid.js会把 AG Grid 事件参数挑选出可安全序列化的字段如data、value、oldValue、newValue、rowIndex、colId等打包后通过$emit发送给 Python 端Python 端即可通过.on(cellValueChanged, ...)订阅。需要留意的是官方文档指出rowClicked等部分事件的参数包含循环引用直接注册会因序列化失败而无法工作。此时可在.on()中显式限定事件参数例如.on(rowClicked, lambda event: ui.notify(fRow: {event.args}), [data])只序列化data字段即可规避详见 aggrid_documentation.py。四、进阶能力把可编辑网格用得更好4.1 读取客户端编辑结果get_client_data / load_client_data如果不想逐个监听cellValueChanged事件可在任意时刻批量取回客户端全部或筛选/排序后的数据data await grid.get_client_data() # 全部行默认顺序 sorted_data await grid.get_client_data(methodfiltered_sorted) # 过滤并排序后的行 grid.load_client_data() # 直接将客户端数据回写为 options[rowData]get_client_data支持all_unsorted、filtered_unsorted、filtered_sorted、leaf四种取值方式实现见 aggrid.py其测试用例在 tests/test_aggrid.py 中验证了默认顺序与排序后的取回结果。同样地它的文档注释再次强调编辑中的单元格在退出编辑前不会更新数据必要时请开启stopEditingWhenCellsLoseFocus。4.2 调用 AG Grid APIrun_grid_method / run_row_methodrun_grid_method可在 Python 端调用任意 AG Grid 网格 API如selectAll、setColumnsVisible、applyTransactionrun_row_method则针对指定行调用需先用getRowId定义行 id。二者均可await以取回返回值aggrid.py官方文档示例与测试均有覆盖如 tests/test_aggrid.py 中通过run_row_method(Alice, setDataValue, age, 42)直接改写指定单元格。关于新增行的进阶做法直接修改rowData会让客户端整体重建网格正在编辑的单元格内容会丢失。若需保留未保存的编辑可以结合grid.props.suspend_updates()与服务端applyTransaction事务 API 实现无重建新增官方文档 aggrid_documentation.py 提供了完整示例。4.3 其他实用配置列定义headerName自定义表头、hide隐藏列、filter/floatingFilter启用迷你过滤器、:getRowHeight传 JS 函数实现动态行高见 aggrid_documentation.py数据源ui.aggrid.from_pandas(df)与ui.aggrid.from_polars(df)可直接从 DataFrame 创建网格aggrid.py非 UTF-8/特殊类型列会被自动转为字符串主题与模块构造函数支持themequartz/balham/material/alpine默认quartz与modulescommunity/enterprise或自定义模块列表当前 NiceGUI 内置的 AG Grid 版本为ui.aggrid.VERSION 34.2.0aggrid.py。五、常见问题速查改了rowData但界面没刷新务必使用rowData[:] ...原地替换或直接append避免整体重新赋值整个options字典后者可能触发不必要的全量重建。编辑后的值没被服务端感知确认单元格已退出编辑模式并优先开启stopEditingWhenCellsLoseFocus: True需要批量取回时使用get_client_data。rowClicked等事件不触发事件参数含循环引用导致序列化失败用.on(event, handler, [data])限定参数范围。行 id 冲突新增行时基于max(id) 1生成新 id删除时按 id 过滤保证增删操作始终以id为唯一键对齐前后端数据。结语通过本文你已掌握 NiceGUI 中可编辑 AG Grid 的完整实现路径用columnDefs/rowData声明网格、用editable开启单元格编辑、用cellValueChanged事件 回写options完成数据同步再用get_selected_rows与列表过滤实现批量删除。这套模式可直接迁移到任何需要前端表格交互的 Python 应用场景中结合 tests/test_aggrid.py 与 aggrid_documentation.py 中的更多示例你可以继续探索过滤、排序、复杂对象、事务更新等高级用法。【免费下载链接】niceguiCreate web-based user interfaces with Python. The nice way.项目地址: https://gitcode.com/GitHub_Trending/ni/nicegui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考 NiceGUI 可编辑 AG Grid 实战：构建支持增、删、改行的数据表格
NiceGUI 可编辑 AG Grid 实战构建支持增、删、改行的数据表格【免费下载链接】niceguiCreate web-based user interfaces with Python. The nice way.项目地址: https://gitcode.com/GitHub_Trending/ni/nicegui导读本指南以 NiceGUI 仓库中的 examples/editable_ag_grid 示例为核心完整讲解如何基于ui.aggrid构建一个支持新增行、单元格内联编辑、批量删除选中行的数据表格并深入源码剖析options数据同步、事件转发与行选择 API 的底层机制。读完本文你将能够在自己的 NiceGUI 应用中复现一个开箱即用的可编辑表格并掌握让服务端数据与前端网格保持一致的关键技巧。示例总览AG Grid 是功能强大的 JavaScript 数据网格库NiceGUI 通过ui.aggrid元素将其封装为 Python 组件全部网格配置以字典形式传入Python 端通过操作options字典与浏览器端保持同步。本文对应的完整示例位于 examples/editable_ag_grid/main.py运行方式与仓库中其他示例一致python main.py启动后浏览器打开 NiceGUI 默认地址通常为http://localhost:8080即可看到下图所示的表格界面示例实现了三项核心能力双击单元格修改数据、点击New row追加行、选中若干行后点击Delete selected批量删除每一步操作都会通过ui.notify在页面右上角给出反馈。一、构建可编辑网格从一段核心配置开始先看示例中创建网格的部分main.pyaggrid ui.aggrid({ columnDefs: [ {field: name, editable: True, sortable: True}, {field: age, editable: True}, {field: id}, ], rowData: [ {id: 0, name: Alice, age: 18}, {id: 1, name: Bob, age: 21}, {id: 2, name: Carol, age: 20}, ], rowSelection: {mode: multiRow}, stopEditingWhenCellsLoseFocus: True, }).on(cellValueChanged, handle_cell_value_change)对配置项逐一说明配置键作用示例值说明columnDefs定义列及每列的属性editable: True开启单元格编辑sortable: True允许点击表头排序id列不编辑、仅作行标识rowData网格初始数据列表中的每个字典对应一行这里初始化了三行数据rowSelection行选择模式{mode: multiRow}表示支持多行选择同时选中多行stopEditingWhenCellsLoseFocus编辑状态控制置True后单元格在失去焦点时即结束编辑并提交新值其中stopEditingWhenCellsLoseFocus值得特别留意。从 aggrid.py 的文档注释可以看到编辑中的单元格只有在退出编辑模式后其数据才会被回传——而失去焦点即退出编辑这个行为必须显式开启。若不设置该项用户点击网格外区域时编辑不会结束服务端可能一直拿不到新值。二、三种行操作新增、编辑、删除的完整实现2.1 新增行add_rowdef add_row(): new_id max((dx[id] for dx in aggrid.options[rowData]), default-1) 1 aggrid.options[rowData].append({id: new_id, name: New name, age: None}) ui.notify(fAdded row with ID {new_id})关键点直接修改aggrid.options[rowData]这个列表。options是AgGrid暴露的受监控字典见源码 aggrid.py对其中数据的修改会被 NiceGUI 检测到并自动推送到浏览器端刷新网格。新增行时用max(...) 1生成自增id保证新行 id 不与现有行冲突。补充options字典在创建时还会被自动注入theme默认quartz等字段详见 aggrid.pyauto_size_columns未显式设置时会按列不使用flex则自动撑满网格宽度的规则生成autoSizeStrategy。2.2 单元格编辑与事件回传handle_cell_value_changedef handle_cell_value_change(e): new_row e.args[data] ui.notify(fUpdated row to: {e.args[data]}) aggrid.options[rowData][:] [row | new_row if row[id] new_row[id] else row for row in aggrid.options[rowData]]用户编辑完成后触发cellValueChanged事件事件对象e.args中包含 AG Grid 回传的整行数据data字段。回调中做两件事用ui.notify给出编辑反馈用编辑后的新行数据替换rowData中 id 匹配的旧行——row | new_row是 Python 3.9 的字典合并语法new_row的字段会覆盖旧行同名字段。通过切片赋值rowData[:] ...原地更新列表确保网格能感知变更并刷新。这一事件驱动 回写 options的模式正是可编辑网格保持前后端数据一致性的核心套路。2.3 删除选中行delete_selectedasync def delete_selected(): selected_id [row[id] for row in await aggrid.get_selected_rows()] aggrid.options[rowData][:] [row for row in aggrid.options[rowData] if row[id] not in selected_id] ui.notify(fDeleted row with ID {selected_id})删除操作分两步await aggrid.get_selected_rows()从浏览器端取回当前所有选中行的数据用列表推导式过滤掉 id 在选中集合中的行再通过切片赋值写回rowData。get_selected_rows是AgGrid提供的内置异步方法其实现位于 aggrid.py底层调用 AG Grid API 的getSelectedRows方法配套的get_selected_rowaggrid.py则在单行选择模式下返回第一行或None。官方测试 tests/test_aggrid.py 对多选与单选两种取回方式均有验证。最后两个按钮把三个操作串起来ui.button(Delete selected, on_clickdelete_selected) ui.button(New row, on_clickadd_row)三、源码原理事件如何从浏览器到达 Python示例中.on(cellValueChanged, handle_cell_value_change)能生效依赖 NiceGUI 为 AG Grid 建立的事件转发链路。从 aggrid.js 可以看到网格创建后立即注册了全局监听器this.api AgGrid.createGrid(this.$el, this.gridOptions); this.api.addGlobalListener(this.handle_event);handle_eventaggrid.js会把 AG Grid 事件参数挑选出可安全序列化的字段如data、value、oldValue、newValue、rowIndex、colId等打包后通过$emit发送给 Python 端Python 端即可通过.on(cellValueChanged, ...)订阅。需要留意的是官方文档指出rowClicked等部分事件的参数包含循环引用直接注册会因序列化失败而无法工作。此时可在.on()中显式限定事件参数例如.on(rowClicked, lambda event: ui.notify(fRow: {event.args}), [data])只序列化data字段即可规避详见 aggrid_documentation.py。四、进阶能力把可编辑网格用得更好4.1 读取客户端编辑结果get_client_data / load_client_data如果不想逐个监听cellValueChanged事件可在任意时刻批量取回客户端全部或筛选/排序后的数据data await grid.get_client_data() # 全部行默认顺序 sorted_data await grid.get_client_data(methodfiltered_sorted) # 过滤并排序后的行 grid.load_client_data() # 直接将客户端数据回写为 options[rowData]get_client_data支持all_unsorted、filtered_unsorted、filtered_sorted、leaf四种取值方式实现见 aggrid.py其测试用例在 tests/test_aggrid.py 中验证了默认顺序与排序后的取回结果。同样地它的文档注释再次强调编辑中的单元格在退出编辑前不会更新数据必要时请开启stopEditingWhenCellsLoseFocus。4.2 调用 AG Grid APIrun_grid_method / run_row_methodrun_grid_method可在 Python 端调用任意 AG Grid 网格 API如selectAll、setColumnsVisible、applyTransactionrun_row_method则针对指定行调用需先用getRowId定义行 id。二者均可await以取回返回值aggrid.py官方文档示例与测试均有覆盖如 tests/test_aggrid.py 中通过run_row_method(Alice, setDataValue, age, 42)直接改写指定单元格。关于新增行的进阶做法直接修改rowData会让客户端整体重建网格正在编辑的单元格内容会丢失。若需保留未保存的编辑可以结合grid.props.suspend_updates()与服务端applyTransaction事务 API 实现无重建新增官方文档 aggrid_documentation.py 提供了完整示例。4.3 其他实用配置列定义headerName自定义表头、hide隐藏列、filter/floatingFilter启用迷你过滤器、:getRowHeight传 JS 函数实现动态行高见 aggrid_documentation.py数据源ui.aggrid.from_pandas(df)与ui.aggrid.from_polars(df)可直接从 DataFrame 创建网格aggrid.py非 UTF-8/特殊类型列会被自动转为字符串主题与模块构造函数支持themequartz/balham/material/alpine默认quartz与modulescommunity/enterprise或自定义模块列表当前 NiceGUI 内置的 AG Grid 版本为ui.aggrid.VERSION 34.2.0aggrid.py。五、常见问题速查改了rowData但界面没刷新务必使用rowData[:] ...原地替换或直接append避免整体重新赋值整个options字典后者可能触发不必要的全量重建。编辑后的值没被服务端感知确认单元格已退出编辑模式并优先开启stopEditingWhenCellsLoseFocus: True需要批量取回时使用get_client_data。rowClicked等事件不触发事件参数含循环引用导致序列化失败用.on(event, handler, [data])限定参数范围。行 id 冲突新增行时基于max(id) 1生成新 id删除时按 id 过滤保证增删操作始终以id为唯一键对齐前后端数据。结语通过本文你已掌握 NiceGUI 中可编辑 AG Grid 的完整实现路径用columnDefs/rowData声明网格、用editable开启单元格编辑、用cellValueChanged事件 回写options完成数据同步再用get_selected_rows与列表过滤实现批量删除。这套模式可直接迁移到任何需要前端表格交互的 Python 应用场景中结合 tests/test_aggrid.py 与 aggrid_documentation.py 中的更多示例你可以继续探索过滤、排序、复杂对象、事务更新等高级用法。【免费下载链接】niceguiCreate web-based user interfaces with Python. The nice way.项目地址: https://gitcode.com/GitHub_Trending/ni/nicegui创作声明：本文部分内容由AI辅助生成（AIGC），仅供参考