SuperAPI AI 工具集

igniteui-angular-grid-data-operations

前端与建站

查看项目

更新于 10-15 22:17

技能介绍

用途:本技能面向 AI 智能体,讲解如何在 Ignite UI for Angular 网格中实现数据操作与状态管理,包括单元格编辑、行编辑、批量编辑、排序、筛选、分组、分页、远程数据绑定、虚拟化以及服务接线。若问题涉及渲染什么(列、模板、网格类型),应使用 Data Grids 技能;若涉及数据如何流动(排序、筛选、远程服务、事务),则用本技能。

前提:Angular 20+ 项目;已安装 igniteui-angular,或授权用户使用 @infragistics/igniteui-angular(两者入口结构相同);已应用主题;熟悉 Data Grids 技能的基础设置。

主要能力:排序支持模板驱动与编程式(sort、clearSort),单列/多列模式,可取消的 sorting 事件与 sortingDone,以及自定义 ISortingStrategy。筛选支持快速筛选、Excel 风格与高级筛选,编程式 filter、clearFilter、filterGlobal,复杂 AND/OR 条件树 FilteringExpressionsTree,以及按数据类型的操作符(字符串、数字、日期、布尔)。分组仅限 Flat Grid,支持 groupBy、clearGrouping、toggleGroup、自定义分组比较器。分页通过 igx-paginator 组件或编程式 paginator 控制,支持远程分页。

使用方式:所有编程式操作需通过 viewChild 获取网格实例。导入必须使用具体入口点,禁止从根 barrel 导入。开源包与授权包前缀不同,需按 package.json 替换。默认示例使用 Flat Grid(IgxGridComponent),Tree Grid 替换为 IgxTreeGridComponent,Hierarchical Grid 替换为 IgxHierarchicalGridComponent;三者的排序、筛选、编辑 API 相同或相近。

限制:Pivot Grid 不支持标准排序/筛选/编辑 API,使用维度级操作;Grid Lite 有独立的轻量排序/筛选 API。分组仅 Flat Grid 支持。Tree Grid 排序按层级进行,筛选为递归并自动展开祖先;Hierarchical Grid 各层级独立配置。资料未提供收费、价格与具体平台信息。