NiceGUI `ui.table` 基础

NiceGUI ui.table 基础

ui.table 是 NiceGUI 提供的一个组件,用于在页面上展示数据表格


基本概念

官方简介

A table based on Quasar’s QTable component.

参数参考
rows:list of row objects; 行对象列表
columns:list of column objects (defaults to the columns of the first row);列对象列表(默认为第一行的列)
column_defaults:optional default column properties; 可选的默认列属性
row_key:name of the column containing unique data identifying the row (default: “id”); 包含标识行的唯一数据的列的名称(默认值:“id”)
title:title of the table; 表格标题
selection:selection type (“single” or “multiple”; default: None); 选择类型(“单”或“多”;默认值:无)
pagination:a dictionary correlating to a pagination object or number of rows per page (None hides the pagination, 0 means “infinite”; default: None).; 与分页对象或每页行数相关的字典(None隐藏分页,0表示“无限”;默认值:None)
on_select:callback which is invoked when the selection changes; 当选择更改时调用的回调
on_pagination_change:callback which is invoked when the pagination changes; 当分页更改时调用的回调

If selection is ‘single’ or ‘multiple’, then a selected property is accessible containing the selected rows.

如果 selection 为 ‘single’ 或 ‘multiple’,则可访问包含所选行的所选属性。

简介

  • columns:定义表格的列,包括列标题、数据字段映射、对齐方式等。
  • rows:定义表格的数据,每行是一个字典,键需要与 columns 中的 field 值对应。

columnsrows 的关系

  • columnsfield 指定了表格从 rows 中取值的键。
  • 如果 columns 中的 field 未定义或与 rows 数据不匹配,该列的数据会显示为空白。

columns 字段说明

必须定义的字段

  1. name

    • 唯一标识列的名称,表格内部使用。
    • 必须是字符串类型。
  2. label

    • 表头中显示的列标题。
    • 如果未定义,表头中该列将显示为空白。
  3. field

    • 指定从 rows 的哪个键中取值,绑定列与行数据。
    • 如果未定义,表格无法显示该列对应的数据。

可选字段

  1. align

    • 控制列内容的对齐方式。
    • 可选值:'left', 'center', 'right'
    • 默认值:'left'
  2. sortable

    • 是否允许对该列进行排序。
    • 类型:布尔值,默认值为 False
  3. width

    • 设置列宽,可以是像素值(如 '100px')或百分比(如 '20%')。
  4. classes

    • 自定义 CSS 类,用于控制列样式。

示例代码

以下代码展示了一个完整的表格定义,包括两列:conditionval

from nicegui import ui

# 定义表格的列
columns = [
    {
        'name': 'condition',     # 必须:唯一标识列
        'label': 'Condition',    # 必须:表头名称
        'field': 'condition',    # 必须:对应行数据的键
        'align': 'left',         # 可选:对齐方式
        'sortable': True,        # 可选:启用排序
        'width': '50%',          # 可选:列宽
    },
    {
        'name': 'val',
        'label': 'Value',
        'field': 'val',
        'align': 'center',
        'sortable': False,       # 可选:禁用排序
    },
]

# 定义表格的数据行
rows = [
    {'condition': 'a > 10', 'val': True},
    {'condition': 'b > 20', 'val': True},
    {'condition': 'c > 30', 'val': False},
]

# 创建 UI 表格

ui.table(
    columns=columns,
    rows=rows
)

ui.run()

运行效果

ConditionValue
a > 10True
b > 20True
c > 30False

常见问题

示例:未定义 field

field 是表格列与行数据绑定的关键字段。表格通过 fieldrows 中取值,如果未定义 field,表格无法知道该列需要显示哪些数据。

columns = [
    {'name': 'condition', 'label': 'Condition', 'align': 'left'},  # 缺少 field
    {'name': 'val', 'label': 'Value', 'align': 'center'},         # 缺少 field
]

结果:表头显示 ConditionValue,但行数据为空白。

正确方式

columns = [
    {'name': 'condition', 'label': 'Condition', 'field': 'condition', 'align': 'left'},
    {'name': 'val', 'label': 'Value', 'field': 'val', 'align': 'center'},
]

NiceGUI 官方文档:https://nicegui.io

### NiceGUI 的简介 NiceGUI 是一种基于 Python 的用户界面框架,能够轻松构建运行于 Web 浏览器中的图形化用户界面 (GUI)[^3]。它的设计目标是提供简单易用的 API 和灵活的功能组合,使得开发者无需深入掌握前端技术即可快速实现交互式应用程序。 --- ### 安装与使用教程 为了开始使用 NiceGUI,可以通过 pip 巛包管理工具进行安装: ```bash pip install nicegui ``` 安装完成后,可以按照以下代码示例创建一个简单的 GUI 应用程序: ```python from nicegui import ui def greet(): name = name_input.value or 'World' ui.notify(f'Hello {name}!') with ui.card().classes('w-full max-w-300 mx-auto'): with ui.column().classes('items-center'): name_input = ui.input('Your name').props('autofocus') ui.button('Greet', on_click=greet) ui.run() ``` 上述代码展示了如何定义输入框、按钮以及通知消息等功能组件[^2]。通过 `ui.run()` 方法启动服务器后,在浏览器中访问指定地址即可查看效果。 --- ### 功能特性概述 #### 基本功能模块 1. **UI 组件**: 提供丰富的内置控件支持,例如按钮 (`ui.button`)、滑动条 (`ui.slider`)、表格 (`ui.table`) 等。 2. **事件处理机制**: 支持绑定回调函数至特定操作(如点击或拖拽),从而动态响应用户的互动行为。 3. **样式定制能力**: 利用 Tailwind CSS 实现高度自定义外观布局的可能性;同时也允许直接嵌入 HTML/CSS/JavaScript 片段扩展原生表现力。 4. **多媒体集成选项**: 能够加载图片资源或者播放音频视频文件,并且兼容 Markdown 渲染语法用于富文本展示。 5. **高级视觉呈现手段**: 包含 Three.js 集成接口以便制作复杂的三维模型视图,还有 Plotly 插件辅助统计图表绘制工作。 #### 场景适用范围 由于其轻量级特性和跨平台属性,特别适合应用于如下领域: - 小型独立网站建设; - 数据监控面板维护; - 教育培训演示材料准备; - 科研实验原型验证环境部署等等[^3]。 尽管官方文档存在一定程度上的混乱状况[^1],不过随着社区贡献者的增多和技术积累加深,越来越多高质量指南陆续涌现出来弥补这一缺陷。 --- ### 开发建议 针对初次接触该库的新手而言,可以从模仿现有案例起步逐步熟悉各项核心概念并不断试验调整直至熟练运用为止。同时积极参与讨论区交流心得也有助于加速成长过程。 ---
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值