syncfusion-blazor-datagrid

用途

Syncfusion Blazor DataGrid（SfGrid<TValue>）是一个高性能、功能丰富的表格数据展示与操作组件。该技能用于在 Blazor 项目中实现和配置 DataGrid，覆盖从基础绑定到高级交互的各类表格操作。

主要能力

数据绑定：本地数据（List、ExpandoObject、DynamicObject、DataTable、ObservableCollection）与远程数据（OData V4、Web API、URL 适配器、自定义适配器）。
列配置：列类型、格式、对齐、冻结、重排、调整大小、列选择器、堆叠表头、列菜单、外键列。
排序、筛选（FilterBar/Menu/Excel/CheckBox）、搜索。
分组（含延迟加载分组、标题模板）与分页（自定义模板、SfPager）。
滚动：虚拟滚动、无限滚动、粘性表头、ScrollIntoViewAsync。
编辑：Normal/Dialog/Batch/CommandColumn 模式，校验规则、编辑模板、CRUD 方法。
选择：行、单元格、复选框选择及编程式控制；剪贴板复制、AutoFill、粘贴。
聚合：页脚、分组页脚、分组标题、响应式聚合。
行特性与模板：RowDataBound、行拖放、行高、行合并、RowTemplate、DetailTemplate、层级嵌套 Grid。
工具栏与上下文菜单：内置/自定义工具栏项、自定义上下文菜单项。
导出与打印：Excel 导出、PDF 导出、打印。
性能优化：SetRowDataAsync、PreventRender、WebAssembly 优化、列虚拟化建议。
事件与状态：完整 GridEvents 参考、EnablePersistence 状态持久化。
样式与自适应 UI：CSS 类定制、EnableAdaptiveUI、移动端响应式布局。

使用方式

依赖项：NuGet 包 Syncfusion.Blazor.Grid 与 Syncfusion.Blazor.Themes；命名空间 Syncfusion.Blazor.Grids。

基础用法示例：

@page "/datagrid-demo"
@using Syncfusion.Blazor.Grids

<SfGrid DataSource="@Orders" AllowPaging="true" AllowSorting="true" AllowFiltering="true">
    <GridPageSettings PageSize="10"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="OrderID"    HeaderText="Order ID"   IsPrimaryKey="true" Width="120" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="CustomerID" HeaderText="Customer"   Width="150"></GridColumn>
        <GridColumn Field="Freight"    HeaderText="Freight"    Format="C2" Width="120" TextAlign="TextAlign.Right"></GridColumn>
        <GridColumn Field="OrderDate"  HeaderText="Order Date" Format="d"  Width="150" Type="ColumnType.Date"></GridColumn>
        <GridColumn Field="ShipCountry" HeaderText="Ship Country" Width="150"></GridColumn>
    </GridColumns>
</SfGrid>

带编辑与工具栏：

<SfGrid DataSource="@Orders" Toolbar="@(new List<string>() { "Add","Edit","Delete","Update","Cancel" })">
    <GridEditSettings AllowAdding="true" AllowEditing="true" AllowDeleting="true" Mode="EditMode.Normal"></GridEditSettings>
    <GridColumns>
        <GridColumn Field="OrderID" IsPrimaryKey="true" ValidationRules="@(new ValidationRules{Required=true})"></GridColumn>
        <GridColumn Field="CustomerID" ValidationRules="@(new ValidationRules{Required=true})"></GridColumn>
        <GridColumn Field="Freight" EditType="EditType.NumericEdit"></GridColumn>
    </GridColumns>
</SfGrid>

带分组与分页：

<SfGrid DataSource="@Orders" AllowGrouping="true" AllowPaging="true">
    <GridGroupSettings Columns="@(new string[]{"ShipCountry"})"></GridGroupSettings>
    <GridPageSettings PageSize="10"></GridPageSettings>
    <GridColumns>
        <GridColumn Field="OrderID" Width="120"></GridColumn>
        <GridColumn Field="CustomerID" Width="150"></GridColumn>
        <GridColumn Field="ShipCountry" Width="150"></GridColumn>
    </GridColumns>
</SfGrid>

编程式控制需通过 @ref 获取 Grid 实例，例如：

SfGrid<Order> Grid;
// await Grid.SortColumnAsync("OrderID", SortDirection.Ascending, false);
// await Grid.FilterByColumnAsync("ShipCountry", "equal", "France");
// await Grid.GoToPageAsync(2);
// await Grid.StartEditAsync();
// await Grid.SelectRowAsync(0);

适用场景

需要在 Blazor Server、WebAssembly、Web App 或 MAUI 中构建功能完整的表格界面时使用，例如带排序筛选分页的数据列表、可编辑的业务表单表格、需要分组聚合与导出的报表视图、大数据量下的虚拟滚动列表等。

限制与规则

仅使用官方支持的 Syncfusion DataGrid 功能，不得虚构 API、方法、属性、事件或行为。
事件名必须核对 references/events.md，且所有事件处理器必须定义在 <GridEvents TValue="YourType"> 组件内，不得在 <SfGrid> 上使用 @onEventName 语法。
常见错误事件名：OnSortChange、OnFilterChange、OnPageChange、OnGroupChange 均不存在，应使用 Sorting/Sorted、Filtering/Filtered、PageChanging/PageChanged、Grouping/Grouped。
不得在 OnInitialized、OnAfterRenderAsync、OnParametersSet 等生命周期方法中调用 API 方法，仅在用户交互响应或 GridEvents 处理器中调用。
异步 API 需使用 async/await 模式，事件处理器定义为 async Task。
安全注意：不要将 SfDataManager.Url 绑定到任意用户提供的 URL，应使用配置来源的 URL 变量、内部代理/网关、字段与操作符白名单及服务端校验。
具体收费、价格、平台支持细节及未在资料中说明的功能，暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制与规则