DataGrid · Zeyn 文档

DataGrid 显示来自 action 的行，该 action 接受 DataQuery 并返回 Page<E>。分页、排序、筛选和合计都在服务器上运行，因此百万行的表格对浏览器的开销与百行的表格相同。

一个表格

DataGrid::of(search_samples)
    .paging(Paging::pages(8))
    .column(Sample::code).width(110).filter()
    .column(Sample::name).flex(1).filter()
    .column(Sample::unit).width(120).filter().badge(|u| match u {
        Unit::Piece => Tone::Neutral,
        Unit::Kg => Tone::Info,
        Unit::Liter => Tone::Brand,
    })
    .column(Sample::price).width(150).avg()
    .column(Sample::stock).width(150).sum().progress(120)
    .column(Sample::active).width(100).check_icon()
    .row_style(|s| match s.stock {
        0 => Some(RowStyle::Danger),
        1..=9 => Some(RowStyle::Warning),
        _ => None,
    })

Code	Name	Unit	Price	Stock
S-0001	Green tea 105	Piece	₺83.69	37
S-0002	Coffee beans 110	Liter	₺162.88	74
S-0003	Olive oil 115	Kg	₺242.07	111
S-0004	Honey 120	Piece	₺321.26	28
S-0005	Hazelnuts 125	Liter	₺400.45	65
S-0006	Dried apricots 130	Kg	₺479.64	102
S-0007	Cheese 135	Piece	₺558.83	19
S-0008	Bulgur 140	Liter	₺638.02	56
			平均值 ₺1,212.16	求和 7,140

点击表头排序，在筛选框中输入内容进行筛选，拖动表头可移动列，拖动其边缘可调整列宽。合计涵盖所有经过筛选的行，而不仅是当前页。

action

#[action(permission = "stock.product.read")]
pub async fn search_samples(q: DataQuery, store: SampleStore) -> Result<Page<Sample>> {
    Ok(q.apply(store.all()?))
}

DataQuery::apply 在内存中对 Vec 进行筛选、排序、合计和分页，适用于小型列表和测试。以数据库为后端的存储会读取同一个 DataQuery（页、排序、筛选、合计），并用 SQL 作答；参见数据与数据库。

分页

分页	用途
`Paging::pages(n)`	带页码的分页，除非另行设置，每页 50 行
`Paging::infinite(n)`	滚动时加载更多行
`Paging::virtual_scroll()`	超大列表；页中只包含可见的行
`Paging::none()`	一页即可容纳的短列表

无论客户端请求多少，服务器都会限制页大小。

列

调用	结果
`.width(px)`、`.flex(n)`	固定宽度，或占用剩余宽度的一定份额
`.filter()`	适合该类型的筛选框：文本、数字范围、日期范围、选项列表
`.sum()`、`.avg()`、`.min()`、`.max()`	页脚中的合计。在文本列上使用 `sum` 无法通过编译
`.badge(\|v\| tone)`	将值显示为彩色徽章
`.progress(max)`	从 0 到 `max` 的进度条
`.check_icon()`	对 `true` 显示一个对勾
`.link(\|row\| effect)`	使单元格成为运行某个 effect 的链接
`.pin_start()`、`.hidden()`	固定在起始侧，或隐藏直到用户将其显示
`.editable()`	可就地编辑，通过 `.edit_with(action)` 保存

行

.on_open(|row| effect)：双击行或在行上按 Enter。
.row_action(label, action, |row| input)：每行上的一个按钮。
.bulk_action(label, action, M::id)：对所选行运行。
.row_menu(|row| ContextMenu)：行的右键菜单。
.row_style(|row| Option<RowStyle>)：危险、警告或成功样式的行。
.exportable()：将筛选后的行导出为 CSV，由服务器以流方式输出。

DataGrid 参考涵盖了已保存的视图、主从明细、分组、树形数据、就地编辑、单元格导航、复制和粘贴、列虚拟化以及无障碍。