SuperAPI AI 工具集

igniteui-react-migrate-grid-lite-to-premium

前端与建站

查看项目

更新于 10-16 06:17

技能介绍

用途:指导把 React 版 Grid Lite(IgrGridLite)迁移到高级 Ignite UI for React Data Grid(IgrGrid)。

迁移判断:若需要单元格/行编辑、批量编辑与撤销、行增删、行/单元格/列选择、分页、分组、汇总、列固定/移动/隐藏、主从或分层行、Excel/CSV 导出、高级筛选 UI、状态持久化、行拖放等功能,则应迁移;否则继续使用 Grid Lite 更轻量。

安装与导入:运行 npm install --save igniteui-react-grids(授权时用 @infragistics/igniteui-react-grids)。导入 IgrGrid、IgrColumn,并额外引入 'igniteui-react-grids/grids/themes/light/bootstrap.css'。无需注册,IgrGridModule.register() 已废弃,如存在应删除。

必要属性:primaryKey(编辑、选择等行操作所需)、height(行虚拟化必需,否则不渲染行)、网格级 allowFiltering 加列级 filterable(仅网格级不显示 UI)。未要求时不要设列宽。

API 重命名:cellTemplate→bodyTemplate;IgrCellContext→IgrCellTemplateContext;ctx.value→ctx.cell.value(或 ctx.implicit);ctx.row.data→ctx.cell.row.data;排序表达式由 {key,direction} 改为 {fieldName,dir:SortingDirection.Asc}。上下文类型不再泛型于行类型。

远程数据:移除 dataPipelineConfiguration,改用 noop 策略(IgrNoopSortingStrategy、IgrNoopFilteringStrategy)并在 sortingDone、filteringDone 事件中重新获取数据。工具栏与导出使用 IgrGridToolbar、IgrGridToolbarExporter,编程式导出用 IgrExcelExporterService 等,均来自 igniteui-react-grids。

清理:删除 dataPipelineConfiguration 及其钩子、旧上下文导入和 register() 调用,卸载 igniteui-grid-lite(无实例时),保留基础主题并新增网格主题。

限制:具体版本差异需查阅官方文档确认,资料未提供更多平台或收费细节。