SuperAPI AI 工具集
合作ENAI 行业资讯收藏
Skill 广场syncfusion-angular-gantt-chart

syncfusion-angular-gantt-chart

前端与建站

查看项目

更新于 10-15 15:31

技能介绍

用途

Syncfusion Angular Gantt Chart 是一个面向 Angular 应用的甘特图组件技能，用于实现和配置 Syncfusion 的 ejs-gantt 组件（GanttModule）。当需要在 Angular 项目中构建甘特图功能时，可以借助本技能完成从初始安装到高级特性的实现。

主要能力

该技能覆盖的功能范围较广，主要包括：

  • 安装与配置：通过 ng add @syncfusion/ej2-angular-gantt 安装；导入 material3、bootstrap5、fluent2、tailwind3 等主题的 CSS；以 Angular 独立组件方式设置 imports 与 providers；注入 EditService、FilterService、ToolbarService 等功能服务。
  • 数据绑定：支持默认的自引用扁平数组（id + parentID，配合 idMapping + parentIdMapping），也支持带 child 数组的层级数据；通过 DataManager 与 ODataV4、WebApiAdaptor、UrlAdaptor 等适配器绑定远程数据；支持按需加载（loadChildOnDemand、hasChildMapping）；支持 Observable / RxJS 数据绑定与异步管道；支持远程 CRUD（crudUrl、insertUrl、updateUrl、removeUrl、batchUrl）。
  • Observable CRUD：通过 dataSourceChanged 事件处理增删改；服务继承 BehaviorSubject；编辑时使用 (args.data as any).taskData 提取任务数据；操作完成后调用 args.endEdit()；通过 super.next()/this.next() 刷新界面。
  • 任务排程：taskMode 支持 'Auto'（默认）、'Manual'、'Custom'；支持非排程任务（allowUnscheduledTasks）；durationUnit 支持 Day/Hour/Minute/Week/Month 及带数值的单位（如 '5 days'）；可配置 daysPerWeek、daysPerMonth、workWeek（默认周一至周五）、includeWeekend、dayWorkingTime；支持基线（renderBaseline、baselineStartDate、baselineEndDate、baselineDuration、baselineColor、baselineTemplate）；支持工作量排程（work、workUnit）。
  • 日历设置：calendarSettings 顶层配置；projectCalendar 定义默认工作日、工作小时、节假日与例外；taskCalendar 支持针对班次、团队或地区的任务日历；taskFields.calendarId 将任务映射到命名任务日历；hoursPerDay 控制工时与天数的换算。
  • 任务依赖：支持 FS、SS、FF、SF 依赖类型，格式如 '2FS'、'3SS+1d'；支持逗号分隔的多个前驱；支持前置延迟/提前偏移；autoUpdatePredecessorOffset；allowParentDependency；allowedDependencyTypes；任务条连线拖拽编辑；编程方法 addPredecessor()、removePredecessor()、updateRecordById()；connectorLineWidth、connectorLineBackground。
  • 任务约束：8 种约束类型（ASAP、ALAP、MSO、MFO、SNET、SNLT、FNET、FNLT），通过 taskFields.constraintType 与 constraintDate 映射，仅在 Auto 模式下生效。
  • 任务管理：editSettings 配置 allowEditing、allowAdding、allowDeleting、allowTaskbarEditing 及 mode（'Auto'/'Dialog'）；单元格编辑支持 numericedit、defaultedit、dropdownedit、booleanedit、datepickeredit；对话框编辑支持自定义选项卡；编程方法 addRecord()、updateRecordById()、deleteRecord()、openAddDialog()、openEditDialog()；展开折叠方法及事件；通过 actionBegin 校验；服务器 CRUD 通过 actionComplete；层级缩进 indent()/outdent()。
  • 任务拆分与合并：通过 taskFields.segments（层级数据）或 taskFields.segmentId（自引用数据）拆分任务；通过对话框 Segments 选项卡或上下文菜单 SplitTask 拆分；通过 MergeTask 或拖拽合并；onTaskbarClick 配合 segmentIndex 检测点击的片段；父任务与里程碑任务不支持拆分，且与多任务条资源视图不兼容。
  • 资源：resources 数据与 resourceFields 映射（id、name、unit、group）；taskFields.resourceInfo 关联资源；ResourceView 模式；showOverAllocationAsMultiTaskbar；allowTaskbarOverlap；基于工作量的排程（work、taskType：FixedWork/FixedDuration/FixedUnit）；workUnit。
  • 列：字段、headerText、width、format、type、template、headerTemplate；列重排与调整大小；冻结列；通过 queryCellInfo 实现列合并；treeColumnIndex；WBS 列（columnType: 'WBS'）；序号列（enableSerialNumber、field: 'SerialNumber'）；列菜单；CRUD 需要 isPrimaryKey。
  • 时间线与任务条：timelineSettings 配置上下层、视图模式、格式化函数、单元格宽度、自定义日期格式、项目起止日期、视图窗口、周起始日、无限时间线滚动、周末高亮、单元格提示、timelineTemplate；任务条支持 taskbarTemplate、parentTaskbarTemplate、milestoneTemplate、labelSettings、queryTaskbarInfo 动态样式、indicators 数据标记、tooltipSettings、taskbarHeight、taskbarCornerRadius、allowTaskbarDragAndDrop；任务条绘制（allowTaskbarDraw）。
  • 过滤、搜索、排序、行、选择、滚动：allowFiltering 配合 FilterService，支持菜单与 Excel 过滤、hierarchyMode；allowSearching 配合 'Search' 工具栏项与 searchSettings；allowSorting 配合 SortService，支持多列排序与初始排序；rowDataBound / queryCellInfo 动态样式、rowHeight、行合并、行拖拽、indent/outdent、autoFocusTasks；allowSelection 配合 SelectionService，支持行/单元格选择、单选/多选、层级复选框选择（Self/Hierarchy/FilteredHierarchy）、编程选择方法；enableVirtualization 配合 VirtualScrollService、时间线虚拟化、splitterSettings、scrollToDate()、scrollToTaskbar()；虚拟滚动下部分行/列模板、分组与聚合功能不受支持。
  • 工具栏：工具栏项包括 Add、Edit、Delete、Update、Cancel、ExpandAll、CollapseAll、Search、Indent、Outdent、ZoomIn、ZoomOut、ZoomToFit、ExcelExport、CsvExport、PdfExport、CriticalPath、Undo、Redo、SplitTask、MergeTask、ColumnChooser；支持自定义项与分隔符；toolbarClick 事件通过 args.item.id 识别；enableToolbarItems()/disableToolbarItems()。
  • 编程方法与事件：提供列、编辑、任务管理、展开折叠、撤销重做栈、数据检索、格式化、DOM 访问、排序、选择、行重排、滚动等一系列方法；事件涵盖生命周期（load、created、dataBound、destroyed）、编辑生命周期（actionBegin、actionComplete、actionFailure）、任务条（taskbarEditing、taskbarEdited、onTaskbarClick、queryTaskbarInfo）、行与单元格（rowDataBound、queryCellInfo、rowSelected、rowDeselecte...）。

使用方式

该技能以文档导航的形式组织，按主题提供多个参考文件，例如：

  • references/getting-started.md：入门与安装
  • references/data-binding.md：数据绑定
  • references/observable-crud.md：Observable CRUD
  • references/task-scheduling.md：任务排程
  • references/calendar-settings.md：日历设置
  • references/task-dependencies.md：任务依赖
  • references/task-constraints.md：任务约束
  • references/managing-tasks.md：任务管理
  • references/splitting-and-merging.md：任务拆分与合并
  • references/resources.md：资源
  • references/columns.md：列
  • references/timeline.md：时间线
  • references/taskbar.md：任务条
  • references/taskbar-draw.md：任务条绘制
  • references/filtering-and-searching.md：过滤与搜索
  • references/sorting.md：排序
  • references/rows.md：行
  • references/selection.md：选择
  • references/scrolling.md：滚动
  • references/toolbar.md：工具栏
  • references/gantt-methods.md：编程方法
  • references/events.md：事件

开发者可根据需要查阅对应主题的参考文档，获取具体的配置项、方法名与实现细节。

适用场景

适用于在 Angular 应用中构建甘特图相关功能的场景，包括项目计划与任务排程、资源分配与管理、多日历与班次排程、任务依赖与关键路径展示、大数据量虚拟滚动、导入导出与本地化等需求。

限制

  • 任务拆分不支持父任务与里程碑任务，且与多任务条资源视图不兼容。
  • 虚拟滚动下，行/列模板、分组与部分聚合功能不受支持。
  • 任务约束仅在 Auto 模式下强制生效，在 Manual 模式下仅存储而不强制执行。
  • 任务日历不与项目日历合并，分配任务日历的任务以该任务日历优先。
  • 关于收费、价格、平台支持等具体信息，资料中暂未提供。