igniteui-angular-grids

Angular 的 Ignite UI — 数据网格

Ignite UI CLI MCP 服务（必需）

在执行任何其他步骤之前，通过调用 list_components 并设置 framework: "angular"，验证 igniteui-cli MCP 服务是否可用。如果工具不可用，请按照 igniteui-angular-components 中的设置流程操作：自行运行 npx -y igniteui-cli ai-config（或 ig ai-config）进行配置，请用户重新加载编辑器或 Agent 会话，然后停止；只有用户明确要求时，才在没有该服务的情况下继续。

必需工作流

本文件仅用于路由，不包含代码示例或 API 详情。 网格 API 会随版本变化，因此切勿凭记忆编写组件选择器、导入路径、方法名称或属性名称——请先阅读相关参考文件。

1. 确定网格类型。 使用下方的网格选择决策指南。如果用户没有明确说明网格类型，请根据上下文推断或询问。
2. 确定涉及的所有任务类别。 将用户的请求对应到下方“任务 → 参考文件”表格中的一行或多行。单个请求通常涉及多个类别（例如，远程分页加编辑需要同时查阅 paging-remote.md 和 editing.md）。
3. 完整阅读所有确定的参考文件，并在一次并行读取批次中完成——即使你认为自己已经知道答案，也必须阅读。
4. 然后生成输出，且只能依据已阅读的内容。如果参考文件未涵盖某项内容，请通过 igniteui-cli MCP 服务中的 get_doc/search_docs/search_api 查找。切勿猜测——如果 MCP 服务无法提供答案，请明确说明该细节未经验证。

任务 → 参考文件

任务	要阅读的参考文件
网格类型选择、列配置、列模板、列分组、MRL、固定、排序 UI、筛选 UI、选择	references/structure.md
分组、汇总、单元格合并、工具栏、导出、行拖动、操作条、主从视图、剪贴板	references/features.md
Tree Grid 专属内容、Hierarchical Grid 专属内容、Grid Lite 设置、Grid Lite 数据操作、Pivot Grid 设置	references/types.md
编程式排序／筛选／分组、标准导入模式、viewChild 访问	references/data-operations.md
单元格编辑、行编辑、批量编辑、事务、验证、汇总	references/editing.md
分页、远程数据、服务端操作、noop 策略、虚拟滚动、多网格协调	references/paging-remote.md
状态持久化、Tree Grid／Hierarchical Grid／Pivot Grid 数据操作	references/state.md
网格尺寸（宽度、高度、列尺寸、null／px／% 模式、单元格间距 CSS 变量）	references/sizing.md
当功能超出 Grid Lite 能力时，从 Grid Lite（igx-grid-lite）迁移到完整的 igx-grid	references/grid-migration.md

如有疑问，应多读而不是少读参考文件——多读一个文件的成本很低；臆造 API 则会导致应用无法正常运行。

---

概述

本技能提供有关网格及其功能的高级指导。igniteui-cli MCP 服务包含网格工具栏和导出的完整文档（grid-toolbar、grid-export-excel、exporter-pdf 以及树形／分层／透视网格变体——调用 list_components 查看当前目录），并提供用于按成员查找的 API 成员索引，可通过 search_api/get_api_reference 查询。其他所有内容均以以下参考文件为主要指南。

---

前提条件

• Angular 项目的主版本与已安装的 igniteui-angular 包匹配（igniteui-angular 的主版本与 Angular 主版本同步）
• 已安装 igniteui-angular，或已为授权用户安装 @infragistics/igniteui-angular——这两个包的入口点结构相同
• 已应用主题（参见 igniteui-angular-theming）

---

选择合适的网格

Ignite UI 提供 五种网格类型。选择正确的类型是最重要的决定——每种类型的数据结构、功能和限制都不同。

网格选择决策指南

依次回答以下问题：

1. 用户是否需要轻量级、只读的数据展示，支持排序、筛选和虚拟化，但不需要编辑、选择或分页？→ Grid Lite（开源，采用 MIT 许可）。如果用户之后需要的功能超出 Grid Lite 的能力，请严格升级到 igx-grid（IgxGridComponent）——切勿推荐非网格组件作为替代品。
2. 用户是否需要数据透视表分析（用户可通过拖放行、列、值和聚合项来重新组织数据）？→ Pivot Grid
3. 数据是否具有父子关系，且每个层级的架构都不同（例如，公司 → 部门 → 员工）？→ Hierarchical Grid
4. 数据是否在单一架构内具有父子关系（例如，带有 managerId 字段的员工，或包含嵌套子项数组的数据）？→ Tree Grid
5. 数据是否为扁平列表/表格，且需要企业级功能（编辑、批量编辑、分组、分页、导出等）？→ Flat Grid

选择网格类型后，仍必须完成上述强制流程中的步骤 2–4——返回路由表，并在编写任何代码之前阅读所有适用的 references/ 文件。本页的决策指南和表格仅用于辅助选择，不能替代参考文件。

网格类型与导入

重要： 检查 package.json，确定项目使用的是 igniteui-angular 还是 @infragistics/igniteui-angular。始终从指定的入口点导入。切勿从任一包的根 barrel 导入。

网格	选择器	组件	指令	入口点
Grid Lite	igx-grid-lite	IgxGridLiteComponent	单独导入	igniteui-angular/grids/lite
Flat Grid	igx-grid	IgxGridComponent	IGX_GRID_DIRECTIVES	igniteui-angular/grids/grid
Tree Grid	igx-tree-grid	IgxTreeGridComponent	IGX_TREE_GRID_DIRECTIVES	igniteui-angular/grids/tree-grid
Hierarchical Grid	igx-hierarchical-grid	IgxHierarchicalGridComponent	IGX_HIERARCHICAL_GRID_DIRECTIVES	igniteui-angular/grids/hierarchical-grid
Pivot Grid	igx-pivot-grid	IgxPivotGridComponent	IGX_PIVOT_GRID_DIRECTIVES	igniteui-angular/grids/pivot-grid

对于授权包，将 igniteui-angular 替换为 @infragistics/igniteui-angular——入口点路径相同。

通用规则（适用于所有网格类型）

• 为 viewChild 使用匹配的组件类型 — IgxGridLiteComponent、IgxGridComponent、IgxTreeGridComponent、IgxHierarchicalGridComponent 或 IgxPivotGridComponent
• 从上表导入匹配的指令包 — Grid Lite 也可以单独导入
• 使用信号处理数据 — 使用 signal<T[]>([])，并设置 [data]="myData()"
• 虚拟化会自动启用（行和列）— 切勿将网格放入虚拟滚动容器；请设置固定的 height

重要 — 文档 URL 模式：针对特定网格的主题（排序、筛选、编辑、分页等），文档 URL 会遵循以下命名模式：

• Grid Lite：.../components/grid-lite/{topic}
• 平面网格：.../components/grid/{topic}
• 树形网格：.../components/treegrid/{topic}
• 层级网格：.../components/hierarchicalgrid/{topic}
• 数据透视网格：.../components/pivotGrid/{topic}

各网格类型支持的功能

功能	Grid Lite	平面网格	树形网格	层级网格	数据透视网格
列排序	是	是	是（按级别）	是（按网格级别）	仅按维度
列筛选	是	是	是（递归筛选 — 保留匹配的父项）	是（按网格级别）	仅按维度
GroupBy	否	是（内置 groupBy() API）	是（通过 igx-tree-grid-group-by-area + 分组管道）	否	通过维度实现
分页	否	是	是	是（各级别独立）	否
批量编辑	否	是	是（层级事务）	是（从根级传播）	否
单元格／行编辑	否	是	是	是（按网格级别）	否
添加行	否	是	是（支持父项）	是（按网格级别）	否
主从视图	否	独有	否	否（请使用行岛）	否
行选择	否	是	是 + multipleCascade	是（按网格级别）	有限支持
按需加载	否	否	独有	否	否
固定／移动列	否	是	是	是	否
隐藏列	是	是	是	是	否
调整列宽	是	是	是	是	否
汇总	否	是	是（按级别）	是（按网格级别）	仅水平汇总
状态持久化	否	是	是	是 + 行岛状态	数据透视配置序列化
远程数据操作	dataPipelineConfiguration	事件 + noop 策略	事件 + noop 策略	事件 + noop 策略	不适用
行虚拟化	是	是（行 + 列）	是（行 + 列）	是（行 + 列）	是