Blazor 创建可复用 DataGrid 组件教程

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。

在组件中用 @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


基本上就这些。组件越早抽象出“什么不变”（状态管理、事件流）和“什么可变”（列定义、模板、样式），复用性就越强。

# css # bootstrap # 编码 # app # ai # win # c# # overflow # Object # if # 封装 # auto # 字符串 # class # 委托 # 泛型 # 事件 # 异步 # flex # table # 分页 # 复用 # 自定义 # 绑定 # 装进 # 加载 # 就能 # 首次 # 不需要 # 只需

返回目录在线咨询

上一篇：网络营销职能的作用是什么,网络营销专员工作职责是什么？
下一篇：解析jquery easyui tree异步加载子节点问题

您的项目需求