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

Blazor 中创建可复用的 DataGrid 组件,核心是封装通用逻辑(分页、排序、列配置、行点击等),同时保持对业务数据和样式的完全开放。不需要第三方库,纯 Razor 组件 + C# 即可实现高内聚、低耦合的网格。
定义灵活的列配置模型
避免硬编码列名,用泛型 + 表达式树提取字段名和显示文本。定义一个 DataGridColumn 类:
- 包含
Field(Expression)用于绑定与排序> -
Title字符串控制表头文字 -
Width、Sortable、Visible等开关属性 - 支持自定义模板:用
RenderFragment替代默认单元格渲染
这样使用者只需传入列集合,无需修改组件内部代码就能增删列或定制某列内容。
封装分页与排序状态管理
把 CurrentPage、PageSize、SortField、SortDirection 封装进一个 DataGridState 类,并提供 ApplySorting 和 ApplyPaging 扩展方法处理 IQueryable 或 IEnumerable。
专为中小型企业定制的网络办公软件,富有竞争力的十大特性: 1、独创 web服务器、数据库和应用程序全部自动傻瓜安装,建立企业信息中枢 只需3分钟。 2、客户机无需安装专用软件,使用浏览器即可实现全球办公。 3、集成Internet邮件管理组件,提供web方式的远程邮件服务。 4、集成语音会议组件,节省长途话费开支。 5、集成手机短信组件,重要信息可直接发送到员工手机。 6、集成网络硬
- 在组件中用
@bind-CurrentPage支持双向绑定,方便父组件响应页码变化 - 排序点击列头时,自动切换升/降序,触发
StateHasChanged() - 分页控件(如页码按钮、跳转输入框)复用同一套状态,不重复维护逻辑
暴露关键事件与生命周期钩子
真正可复用的组件必须让使用者能干预行为。为 DataGrid 添加:
-
RowClick:回调参数为TItem,支持导航或弹窗详情 -
OnDataRequested:异步委托,用于加载远程数据(替代直接传Items) -
OnInitializedAsync内触发首次加载,配合IsLoading状态显示骨架屏 -
ChildContent渲染空白态、加载中、无数据提示,比写 if-else 更清晰
样式与响应式适配建议
默认用 Bootstrap 或 Tailwind 的基础表格类(如 table table-striped),但不要锁死 CSS:
- 通过
Class参数接收额外 class 名,叠加自定义样式 - 列宽支持
px、%、fr(若用 Flex/Grid 布局) - 小屏幕下启用水平滚动:外层加
- 选中行高亮?加
:hover或绑定selectedItem动态加 class基本上就这些。组件越早抽象出“什么不变”(状态管理、事件流)和“什么可变”(列定义、模板、样式),复用性就越强。
- 选中行高亮?加









