Blazor 创建可复用 DataGrid 组件教程

Blazor中可复用DataGrid组件通过泛型+表达式树实现列配置、封装DataGridState管理分页排序、暴露RowClick/OnDataRequested等事件，并支持自定义模板、样式扩展与响应式适配。

Blazor 中创建可复用的 DataGrid 组件，核心是封装通用逻辑（分页、排序、列配置、行点击等），同时保持对业务数据和样式的完全开放。不需要第三方库，纯 Razor 组件 + C# 即可实现高内聚、低耦合的网格。

定义灵活的列配置模型

避免硬编码列名，用泛型 + 表达式树提取字段名和显示文本。定义一个 DataGridColumn<titem></titem> 类：

• 包含 Field（Expression<func object>></func>）用于绑定与排序
• Title 字符串控制表头文字
• Width、Sortable、Visible 等开关属性
• 支持自定义模板：用 RenderFragment<titem></titem> 替代默认单元格渲染

这样使用者只需传入列集合，无需修改组件内部代码就能增删列或定制某列内容。

封装分页与排序状态管理

把 CurrentPage、PageSize、SortField、SortDirection 封装进一个 DataGridState<titem></titem> 类，并提供 ApplySorting 和 ApplyPaging 扩展方法处理 IQueryable<titem></titem> 或 IEnumerable<titem></titem>。

标签： css bootstrap 编码 app ai win c# overflow