syncfusion-aspnetcore-grid

Syncfusion ASP.NET Core Grid

Syncfusion ASP.NET Core Grid 是一款功能全面、丰富的组件，用于显示和操作表格数据。它提供广泛的功能，包括数据绑定、分页、排序、筛选、分组、编辑、导出、滚动模式、行／列自定义，以及高级状态管理，可高效处理任意规模和复杂程度的数据集。

⚠️ 安全与信任边界

• Grid skill 不执行任何远程数据访问。
• 所有外部 API 交互均由此 skill 信任边界之外的独立 DataManager skill 处理。

目录

• 何时使用此 Skill
• 组件概览
• 功能／Skill 导航指南
• 快速入门示例

何时使用此 Skill

在以下情况下使用 Syncfusion ASP.NET Core Grid：

• 在 ASP.NET Core 应用中显示表格数据，包含行和列
• 使用分页、虚拟滚动或无限滚动高效处理大型数据集
• 为单列或多列启用排序、筛选和搜索
• 使用多种编辑模式（Inline、Batch、Dialog）直接编辑数据
• 将数据导出为 Excel 或 PDF 格式，并进行自定义
• 对数据分组并计算汇总值
• 使用模板和样式自定义行和单元格
• 管理复杂的列配置（冻结列、跨列、重新排序、调整大小）
• 在呈现数千条记录时优化性能
• 保留 Grid 状态，以保存用户偏好和配置
• 为不同屏幕尺寸提供响应式数据视图

组件概览

Grid 组件提供：

• 数据绑定：支持本地集合、远程数据源和 DataManager 集成
• 分页：支持服务器端或客户端分页，并可自定义每页大小和导航
• 排序：支持单列和多列排序
• 筛选：支持多种筛选模式（FilterBar、FilterMenu、类似 Excel 的筛选）
• 搜索：跨列全局搜索
• 分组：按列对数据分组并计算汇总值
• 选择：支持行、单元格和列选择，以及复选框
• 编辑：支持 Inline、Batch 和 Dialog 模式，并提供验证和模板
• 汇总值：支持 Sum、Average、Count、Min、Max，并可在页脚、分组和标题中显示
• 导出：支持导出为 Excel 和 PDF，并提供模板和自定义选项
• 滚动：支持标准、虚拟和无限滚动模式
• 行自定义：支持模板、详细视图、拖放、固定和跨行
• 列自定义：支持模板、调整大小、重新排序、冻结和跨列
• 性能：针对大型数据集优化呈现
• 响应式设计：适配不同屏幕尺寸的布局

服务器端 Grid 配置的强制规则

重要：配置 ASP.NET Core Grid 时，请遵循以下规则，以确保最佳性能和正确性：

规则 1：DataManager 适配器配置

适配器决定 Grid 如何与服务器后端通信。每种请求类型（读取、创建、更新、删除）都有特定的 URL 映射要求。

适配器	后端	用例
UrlAdaptor	通用 HTTP 端点	使用标准约定的简单 REST API
ODataAdaptor	OData v4 服务	Microsoft ODATA、SAP 服务
ODataV4Adaptor	OData v4（较新版本）	现代 ODATA 端点
WebApiAdaptor	ASP.NET Web API	ASP.NET Core API 控制器
GridAdaptor	Syncfusion GridAdaptor	Syncfusion 内置后端约定

---

📄 完整适配器参考： references/adaptors.md

---

规则 2：使用 EnablePersistence 管理状态

要保留 Grid 状态（排序、筛选、分组、分页、列顺序），请启用持久化：

<ejs-grid id="Grid" allowPaging="true" enablePersistence="true">
    
</ejs-grid>

⚠️ 规则：在 Grid 中使用状态管理时，必须设置 enablePersistence="true"。

规则 3：编辑时的主键配置

键列必须设置 isPrimaryKey="true" 属性；否则编辑会静默失败。

<e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true"></e-grid-column>

功能/技能导航指南

入门与设置

📄 阅读： references/getting-started.md

• 安装 NuGet 包
• 注册标记帮助程序
• 设置 CSS 和脚本
• 初始化基本网格
• 数据绑定基础知识

数据绑定

📄 阅读： references/data-binding.md

• 本地数据绑定（IEnumerable、List、DataTable）
• 使用 DataManager 绑定远程数据（OData、WebAPI）
• 加载指示器
• 动态刷新数据

列配置

📄 阅读： references/columns.md

• 列定义和属性
• 列类型（字符串、数字、日期、布尔值、复选框）
• 列宽和格式
• 列模板和自定义呈现
• 列功能（跨列、重新排序、调整大小）
• 外键列
• 堆叠表头

数据聚合

📄 阅读： references/aggregates.md

• 页脚聚合（Sum、Avg、Count、Min、Max）
• 分组页脚聚合
• 分组标题聚合
• 自定义聚合函数
• 响应式聚合更新

导航与分页

📄 阅读： references/paging.md

• 启用并配置分页
• 配置页面大小
• 导航和页面更改
• 外部分页

数据排序

📄 阅读： references/sorting.md

• 启用排序（单列和多列）
• 初始排序配置
• 自定义排序比较器
• 排序事件

筛选

从这里开始： 📄 阅读 references/filter-setup.md — 启用筛选，选择筛选类型（FilterBar、Menu、Excel、CheckBox）

选择筛选类型：

• 📄 阅读 references/filter-types.md — 所有筛选类型：FilterBar（内联文本）、Menu（运算符）、Excel（复选框）
• 📄 阅读 references/filter-operators.md — 所有筛选运算符、语法、通配符、AND/OR 逻辑

搜索

📄 阅读： references/searching.md

• 网格搜索功能
• 跨列全局搜索
• 搜索配置

数据分组

📄 阅读： references/grouping.md

• 启用按列分组
• 按多个列分组
• 标题模板
• 分组页脚聚合
• 懒加载分组

选择

📄 阅读： references/selection.md

• 行、单元格和列选择模式
• 复选框选择
• 多选处理
• 选择事件

编辑

📄 阅读： references/editing.md

• 启用编辑（allowEditing、allowAdding、allowDeleting）
• 编辑模式：Inline、Batch、Dialog
• 编辑触发方式（双击、工具栏）
• 自定义编辑模板
• 验证规则
• 服务端数据持久化

行功能

📄 阅读： references/row.md

• 行模板
• 详细信息模板（展开/折叠）
• 行拖放
• 行固定
• 跨行

工具栏

📄 阅读： references/tool-bar.md

• 内置工具栏项
• 自定义工具栏按钮
• 工具栏事件

导出到 Excel

📄 阅读： references/excel-export.md

• 设置 Excel 导出
• 导出选项和自定义
• 使用模板导出
• 服务端导出

导出到 PDF

📄 阅读： references/pdf-export.md

• 设置 PDF 导出
• 页眉和页脚
• 导出选项和自定义
• 使用模板导出
• 服务端导出

打印

📄 阅读： references/print.md

• 打印网格
• 打印模板
• 自定义打印

样式与外观

📄 阅读： references/style-and-appearance.md

• 自定义 CSS
• 主题和深色模式
• 内联样式和类
• 自定义配色方案

冻结与固定

📄 阅读： references/frozen.md

• 冻结列
• 冻结行
• 固定行
• 冻结列的行为

滚动模式

📄 阅读： references/scrolling.md

• 标准滚动
• 虚拟滚动（性能优化）
• 无限滚动
• 滚动条和高度配置

层级结构与嵌套数据

📄 阅读： references/hierarchy-grid.md

• 父子数据结构
• 子网格配置
• 展开与折叠行为
• 详情行模板
• 延迟加载子数据

上下文菜单

📄 阅读： references/context-menu.md

• 内置上下文菜单项
• 自定义上下文菜单
• 上下文菜单事件

单元格功能

📄 阅读： references/cell.md

• 单元格模板
• 通过事件自定义单元格
• 自定义单元格属性
• 单元格提示

剪贴板操作

📄 阅读： references/clipboard.md

• 复制和粘贴功能
• 复制时包含表头
• 自定义分隔符

配置管理

📄 阅读： references/global-local.md

• 全局网格设置
• 本地列配置

状态管理

📄 阅读： references/state-management.md

• 持久化网格状态
• 保存和恢复状态
• 本地存储

⚠️ 规则：在网格中使用状态管理时，必须启用 enablePersistence="true"。

数据验证

📄 阅读： references/validation.md

• 内置验证规则
• 自定义验证逻辑
• 动态验证
• 服务端验证
• 错误处理

命令列与行操作

📄 阅读： references/command-column.md

• 内置命令（编辑、删除、保存、取消）
• 自定义命令按钮
• 基于角色和状态的命令
• 命令点击事件
• 条件命令可见性
• CSS 样式和图标

本地化与国际化

📄 阅读： references/localization.md

• 多语言支持（60 多种语言）
• 区域设置和文化配置
• 数字、日期和货币格式
• RTL 支持（阿拉伯语、希伯来语、波斯语）
• 自定义本地化和翻译
• 语言切换器实现

响应式设计与移动设备

📄 阅读： references/adaptive.md

• 为移动设备启用自适应 UI
• 用于筛选和编辑的全屏对话框
• 针对移动设备优化的布局

📄 阅读： references/responsive-design.md

• 响应式网格布局
• 移动设备上的列可见性
• 适合触控的交互
• 移动设备断点

API 参考与属性

📄 阅读： references/properties-configuration.md

• 按类别整理的所有可配置属性
• 便于快速查找的速查表
• 各属性的适用场景
• 配置要求

程序化控制（方法）

📄 阅读： references/programmatic-api.md

• 按类别整理的网格方法（数据、行、列、排序、筛选、分组、分页、编辑、导出）
• 方法签名和参数
• 返回值和使用模式
• 服务端方法调用

事件通信（事件）

📄 阅读： references/events-catalog.md

• 所有网格事件及其触发时机和使用场景
• 用于取消或修改操作的 ActionBegin 事件
• 用于响应式操作的 ActionComplete 事件
• 用于错误处理的 ActionFailure 事件
• 使用 args.requestType 识别操作

数据连接与适配器

📄 阅读： references/adaptors.md

• 5+ 种用于后端集成的适配器类型
• UrlAdaptor、ODataV4Adaptor、WebApiAdaptor
• 自定义适配器和 RemoteSaveAdaptor
• 后端配置示例（C#、Node.js）
• 请求/响应格式规范
• 错误处理和适配器比较

性能优化

📄 阅读： references/performance.md

• 支持 10,000+ 条记录的虚拟滚动
• 无限滚动和渐进式加载
• 内存管理和清理策略
• 包体积优化
• 事件防抖和节流
• 性能基准测试

无障碍访问与合规性

📄 阅读： references/accessibility.md

• 符合 WCAG 2.2 和 Section 508 标准
• WAI-ARIA 实现和屏幕阅读器
• 键盘导航（Tab、方向键、Enter、Escape）
• 色彩对比度和焦点管理
• 无障碍测试工具
• 语义化 HTML 实践

快速入门示例

@* ~/Pages/_ViewImports.cshtml *@
@addTagHelper *, Syncfusion.EJ2

@* ~/Pages/Index.cshtml *@
<ejs-grid id="Grid" dataSource="@ViewBag.DataSource" allowPaging="true" allowSorting="true" allowFiltering="true">
    <e-grid-pagesettings pageSize="10"></e-grid-pagesettings>
    <e-grid-columns>
        <e-grid-column field="OrderID" headerText="Order ID" isPrimaryKey="true" width="120" textAlign="Right"></e-grid-column>
        <e-grid-column field="CustomerID" headerText="Customer ID" width="150"></e-grid-column>
        <e-grid-column field="ShipCity" headerText="Ship City" width="150"></e-grid-column>
        <e-grid-column field="OrderDate" headerText="Order Date" format="yMd" width="150"></e-grid-column>
        <e-grid-column field="Freight" headerText="Freight" format="C2" textAlign="Right" width="120"></e-grid-column>
    </e-grid-columns>
</ejs-grid>

// Controller / PageModel
public IActionResult Index()
{
    ViewBag.DataSource = OrdersDetails.GetAllRecords();
    return View();
}