blazor通用数据表格通过@typeparam titem实现泛型,接收ireadonlylist数据并用renderfragment自定义行渲染;支持分页、排序(含嵌套属性)、搜索(多字段模糊匹配);提供声明式与模板化列配置;暴露onrowclick等事件及isloading状态。

支持泛型和数据绑定的表格基础结构
Blazor 里实现通用数据表格,核心是用 @typeparam TItem 声明泛型参数,让组件能接收任意类型的数据集合。组件接收 IReadOnlyList
内置分页、排序和搜索能力
通用表格常需分页和筛选。可添加如下参数:
-
CurrentPage 和 PageSize 控制分页,内部用
Data.Skip((CurrentPage - 1) * PageSize).Take(PageSize)截取数据 -
SortField 和 SortDirection(Asc/Desc)配合
OrderBy/OrderByDescending动态排序,用Expression<func object>></func>或字符串字段名 +System.Linq.Dynamic.Core库实现(推荐后者,简洁且支持嵌套属性如"User.Name") -
SearchText 触发客户端过滤,对字符串属性做
Contains模糊匹配,支持多字段联合搜索(例如 Name、Email、Description)
列配置与模板化表头/单元格
为兼顾灵活性和易用性,可提供两种列定义方式:
-
声明式列(推荐):通过
<tablecolumn title="姓名" field="x => x.Name"></tablecolumn>组件,内部用表达式提取值并生成表头;支持Sortable="true"、Filterable="true"等开关 -
模板化列:用
<tablecolumn><header>操作</header><cell context="item"><button> Edit(item)">编辑</button></cell></tablecolumn>,完全由使用者控制内容
表头点击触发排序时,自动切换方向并重新渲染;搜索框 debounce 防抖(比如 300ms),避免频繁重算。
华友协同办公管理系统(华友OA),基于微软最新的.net 2.0平台和SQL Server数据库,集成强大的Ajax技术,采用多层分布式架构,实现统一办公平台,功能强大、价格便宜,是适用于企事业单位的通用型网络协同办公系统。 系统秉承协同办公的思想,集成即时通讯、日记管理、通知管理、邮件管理、新闻、考勤管理、短信管理、个人文件柜、日程安排、工作计划、工作日清、通讯录、公文流转、论坛、在线调查、
状态管理与事件暴露
组件应暴露关键交互事件,方便父组件响应:
-
OnRowClick:传入
EventCallback<titem></titem>,点击某行时回调 -
OnPageChanged:传入
EventCallback<int></int>,当前页变化时通知 -
OnSortChanged:传入
EventCallback - 内部维护
IsLoading状态,配合<div class="loading">...</div>显示加载中提示
不强制要求服务端请求逻辑写在组件内,保持它专注 UI 和状态协调——数据获取仍由父组件或独立 service 负责,符合 Blazor 的职责分离原则。
基本上就这些。不复杂但容易忽略的是:泛型约束(比如加 where TItem : class)、空数据占位提示(@if (!Data?.Any()) { <p>暂无数据</p> })、以及响应式断点下隐藏非关键列(用 CSS class 控制)。做好这几处,一个轻量、可复用、易扩展的 Blazor 数据表格就立住了。









