用途
Syncfusion Angular TreeGrid 用于在 Angular 应用中以网格形式展示层级化或树状结构数据,并围绕这些数据提供排序、筛选、编辑、分页、导出等操作能力。
主要能力
- 层级数据展示:通过 childMapping 展开/折叠子记录,或使用 idMapping + parentIdMapping 处理扁平的父子结构。
- 数据操作:排序(单列/多列、自定义比较器)、筛选(筛选栏与菜单模式、类 Excel 筛选、自定义谓词)、搜索(全局与列级)、编辑(单元格、行内、对话框、行、批量模式,含校验)。
- 大数据处理:分页、虚拟滚动、无限滚动与懒加载、列虚拟化。
- 导出与打印:PDF、Excel、CSV 导出及打印功能。
- 界面与交互:工具栏、剪贴板复制粘贴、上下文菜单、选择(行/单元格/复选框)、聚合(Sum、Avg、Min、Max、Count)、冻结行与列、行与列的拖放。
- 外观与适配:内置主题(Material、Bootstrap、Fabric、Tailwind)、CSS 定制、条件样式、响应式自适应与移动端优化。
- 其他:状态持久化(配合 LocalStorage)、外键列、全球化与 RTL、加载动画、无障碍支持(WCAG 2.1 AA、ARIA、键盘导航、屏幕阅读器)。
使用方式
在 Angular 模板中使用 <ejs-treegrid> 标签,通过 [dataSource] 绑定数据,指定 childMapping 匹配子记录属性名,并配置 <e-columns> 中的列字段与类型。功能开关通过 [allowPaging]、[allowSorting]、[allowFiltering] 等属性启用,编辑通过 editSettings 配置。所需功能需在组件的 providers 中注入对应服务,例如 PageService、SortService、FilterService、EditService、ExcelExportService、PdfExportService、PrintService、AggregateService、ToolbarService。
适用场景
需要在 Angular 项目中呈现层级数据并提供完整增删改查、分页、导出与响应式交互的开发者,尤其适合需要快速查阅属性、方法、事件的场景。
限制与约束
- 层级数据必须显式设置 childMapping,否则无法展开/折叠;属性名大小写敏感。
- 数据类型必须与列定义匹配,类型不一致会导致渲染或排序问题。
- 该技能不进行任何远程数据访问,所有外部 API 交互由信任边界之外的 DataManager 技能处理。
- 本资料未提供具体价格、收费模式或平台支持范围,相关内容暂未提供。