aggrid() AG Grid#
使用AG Grid创建网格的元素。
可以使用run_grid_method和run_column_method方法与客户机上的AG Grid实例进行交互。
options：AG Grid选项的字典html_columns：应该以HTML渲染的列的列表（默认：[]）theme：AG Grid主题（默认：'balham'）auto_size_columns：是否自动调整列宽以适应网格宽度（默认：True）
from nicegui import ui
grid = ui.aggrid({
'defaultColDef': {'flex': 1},
'columnDefs': [
{'headerName': 'Name', 'field': 'name'},
{'headerName': 'Age', 'field': 'age'},
{'headerName': 'Parent', 'field': 'parent', 'hide': True},
],
'rowData': [
{'name': 'Alice', 'age': 18, 'parent': 'David'},
{'name': 'Bob', 'age': 21, 'parent': 'Eve'},
{'name': 'Carol', 'age': 42, 'parent': 'Frank'},
],
'rowSelection': 'multiple',
}).classes('max-h-40')
def update():
grid.options['rowData'][0]['age'] += 1
grid.update()
ui.button('Update', on_click=update)
ui.button('Select all', on_click=lambda: grid.run_grid_method('selectAll'))
ui.button('Show parent', on_click=lambda: grid.run_column_method('setColumnVisible', 'parent', True))
# ui.run()
aggrid() 选择 AG Grid 行#
您可以在网格单元格中添加复选框，允许用户选择单个或多个行。
要获取当前选定的行，请使用get_selected_rows方法。此方法返回一个由字典组成的行列表。
如果rowSelection设置为'single'或者要获取第一个选定的行，您也可以使用get_selected_row方法。该方法返回一个单一行为字典，如果没有选定行则返回None。
有关更多信息，请参阅AG Grid文档。
from nicegui import ui
grid = ui.aggrid({
'columnDefs': [
{'headerName': 'Name', 'field': 'name', 'checkboxSelection': True},
{'headerName': 'Age', 'field': 'age'},
],
'rowData': [
{'name': 'Alice', 'age': 18},
{'name': 'Bob', 'age': 21},
{'name': 'Carol', 'age': 42},
],
'rowSelection': 'multiple',
}).classes('max-h-40')
async def output_selected_rows():
rows = await grid.get_selected_rows()
if rows:
for row in rows:
ui.notify(f"{row['name']}, {row['age']}")
else:
ui.notify('No rows selected.')
async def output_selected_row():
row = await grid.get_selected_row()
if row:
ui.notify(f"{row['name']}, {row['age']}")
else:
ui.notify('No row selected!')
ui.button('Output selected rows', on_click=output_selected_rows)
ui.button('Output selected row', on_click=output_selected_row)
# ui.run()
aggrid() 使用迷你过滤器过滤行#
您可以在每列的标题中添加迷你过滤器来过滤行。
注意"agTextColumnFilter"如何匹配单个字符，例如"Alice"和"Carol"中的"a"，而"agNumberColumnFilter"则匹配整个数字，例如"18"和"21"，但不包括"1"。
from nicegui import ui
ui.aggrid({
'columnDefs': [
{'headerName': 'Name', 'field': 'name', 'filter': 'agTextColumnFilter', 'floatingFilter': True},
{'headerName': 'Age', 'field': 'age', 'filter': 'agNumberColumnFilter', 'floatingFilter': True},
],
'rowData': [
{'name': 'Alice', 'age': 18},
{'name': 'Bob', 'age': 21},
{'name': 'Carol', 'age': 42},
],
}).classes('max-h-40')
# ui.run()
aggrid() AG Grid 带有条件单元格格式化#
此演示展示了如何使用cellClassRules根据单元格的值有条件地格式化单元格。
from nicegui import ui
ui.aggrid({
'columnDefs': [
{'headerName': 'Name', 'field': 'name'},
{'headerName': 'Age', 'field': 'age', 'cellClassRules': {
'bg-red-300': 'x < 21',
'bg-green-300': 'x >= 21',
}},
],
'rowData': [
{'name': 'Alice', 'age': 18},
{'name': 'Bob', 'age': 21},
{'name': 'Carol', 'age': 42},
],
})
# ui.run()
从 Pandas DataFrame 创建 aggrid()#
您可以使用from_pandas方法从Pandas DataFrame创建一个AG Grid。此方法接受一个Pandas DataFrame作为输入，并返回一个AG Grid。
import pandas as pd
from nicegui import ui
df = pd.DataFrame(data={'col1': [1, 2], 'col2': [3, 4]})
ui.aggrid.from_pandas(df).classes('max-h-40')
# ui.run()
aggrid() 将列渲染为 HTML#
您可以通过将列索引列表传递给html_columns参数来将列渲染为HTML。
from nicegui import ui
ui.aggrid({
'columnDefs': [
{'headerName': 'Name', 'field': 'name'},
{'headerName': 'URL', 'field': 'url'},
],
'rowData': [
{'name': 'Google', 'url': '<a href="https://google.com">https://google.com</a>'},
{'name': 'Facebook', 'url': '<a href="https://facebook.com">https://facebook.com</a>'},
],
}, html_columns=[1])
# ui.run()
aggrid() 响应AG Grid事件#
所有AG Grid事件都通过AG Grid全局监听器传递给NiceGUI。这些事件可以使用.on()方法进行订阅。
from nicegui import ui
ui.aggrid({
'columnDefs': [
{'headerName': 'Name', 'field': 'name'},
{'headerName': 'Age', 'field': 'age'},
],
'rowData': [
{'name': 'Alice', 'age': 18},
{'name': 'Bob', 'age': 21},
{'name': 'Carol', 'age': 42},
],
}).on('cellClicked', lambda event: ui.notify(f'Cell value: {event.args["value"]}'))
# ui.run()
aggrid() AG Grid中使用复杂对象#
您可以通过用句点分隔字段名来在AG Grid中使用嵌套的复杂对象。（这就是为什么rowData中的键不允许包含句点的原因。）
from nicegui import ui
ui.aggrid({
'columnDefs': [
{'headerName': 'First name', 'field': 'name.first'},
{'headerName': 'Last name', 'field': 'name.last'},
{'headerName': 'Age', 'field': 'age'}
],
'rowData': [
{'name': {'first': 'Alice', 'last': 'Adams'}, 'age': 18},
{'name': {'first': 'Bob', 'last': 'Brown'}, 'age': 21},
{'name': {'first': 'Carol', 'last': 'Clark'}, 'age': 42},
],
}).classes('max-h-40')
# ui.run()
aggrid() AG Grid 中使用动态行高#
您可以通过将一个函数传递给getRowHeight参数来设置个别行的高度。
from nicegui import ui
ui.aggrid({
'columnDefs': [{'field': 'name'}, {'field': 'age'}],
'rowData': [
{'name': 'Alice', 'age': '18'},
{'name': 'Bob', 'age': '21'},
{'name': 'Carol', 'age': '42'},
],
':getRowHeight': 'params => params.data.age > 35 ? 50 : 25',
}).classes('max-h-40')
# ui.run()
aggrid() 运行行方法#
您可以使用run_row_method方法在个别行上运行方法。此方法接受行ID、方法名称和方法参数作为参数。行ID可以是行索引（作为字符串）或getRowId函数的值。
以下演示展示了如何使用它来更新单元格值。请注意，当值更新时，行选择会被保留。如果使用update方法更新网格，情况将不会如此。
from nicegui import ui
grid = ui.aggrid({
'columnDefs': [
{'field': 'name', 'checkboxSelection': True},
{'field': 'age'},
],
'rowData': [
{'name': 'Alice', 'age': 18},
{'name': 'Bob', 'age': 21},
{'name': 'Carol', 'age': 42},
],
':getRowId': '(params) => params.data.name',
})
ui.button('Update',
on_click=lambda: grid.run_row_method('Alice', 'setDataValue', 'age', 99))
# ui.run()
aggrid() 过滤返回值#
您可以通过传递定义JavaScript函数的字符串来过滤方法调用的返回值。此演示运行了网格方法"getDisplayedRowAtIndex"并返回结果的"data"属性。
from nicegui import ui
grid = ui.aggrid({
'columnDefs': [{'field': 'name'}],
'rowData': [{'name': 'Alice'}, {'name': 'Bob'}],
})
async def get_first_name() -> None:
row = await grid.run_grid_method('(g) => g.getDisplayedRowAtIndex(0).data')
ui.notify(row['name'])
ui.button('Get First Name', on_click=get_first_name)
# ui.run()