syncfusion-angular-gantt-chart

Syncfusion Angular 甘特图

一份全面的指南，介绍如何实现和配置 Syncfusion Angular 甘特图组件（ejs-gantt）。内容涵盖初始设置，以及关键路径、虚拟滚动、资源视图、撤销/重做、状态持久化、本地化、导出、任务日历、序列号、高级排程单位、依赖关系限制、层级复选框选择和任务栏绘制等高级功能。

适用场景

在以下情况下使用本指南：

• 安装和设置 Angular 甘特图组件
• 将本地或远程数据绑定到甘特图
• 配置任务排程模式（自动/手动/自定义）
• 定义任务依赖关系和前置任务关系
• 添加、编辑或删除任务（单元格、对话框、任务栏编辑）
• 分配和管理资源
• 配置项目和任务日历中的工作时间、节假日和例外情况
• 配置时间线、缩放和层级格式
• 自定义任务栏、标签和数据标记
• 筛选、排序、搜索或选择行/单元格
• 启用工具栏、上下文菜单或撤销/重做
• 导出为 Excel 或 PDF
• 实现虚拟滚动或状态持久化
• 应用本地化、RTL 布局或时区配置
• 使用节假日、事件标记、关键路径或基线

---

文档和导航指南

入门

📄 阅读： references/getting-started.md

• 通过 ng add @syncfusion/ej2-angular-gantt 安装
• 导入所有主题的 CSS（material3、bootstrap5、fluent2、tailwind3）
• 使用 imports 和 providers 设置 Angular 独立组件
• 使用 dataSource 和 taskFields 绑定数据——自引用与层级数据
• 注入功能服务（EditService、FilterService、ToolbarService 等）
• 配置时间线、工具栏、编辑、筛选和排序
• gridLines 的取值：'Both' | 'Horizontal' | 'Vertical' | 'None'
• 使用 actionFailure 处理常见配置错误

数据绑定

📄 阅读： references/data-binding.md

• 默认模式： 使用 id 和 parentID 的自引用扁平数组（idMapping + parentIdMapping）——除非用户明确要求嵌套数据，否则使用此模式
• 使用 child 数组的本地层级数据——仅在用户明确要求嵌套/树形结构时使用
• 决策表：何时使用自引用数据与层级数据
• 使用 DataManager 和适配器进行远程数据绑定（ODataV4、WebApiAdaptor、UrlAdaptor）
• 使用 loadChildOnDemand 和 hasChildMapping 按需加载（虚拟加载）
• 使用 async 管道进行 Observable / RxJS 数据绑定
• 使用 crudUrl、insertUrl、updateUrl、removeUrl、batchUrl 进行远程 CRUD
• 常见注意事项表（缺少 isPrimaryKey、适配器错误、父项日期问题）

Observable CRUD 操作

📄 阅读： references/observable-crud.md

• 通过 dataSourceChanged 事件，使用 Observable 数据绑定处理添加、编辑和删除操作
• 服务扩展 BehaviorSubject，以实现正确的 Observable 绑定
• 正确提取任务数据：编辑操作使用 (args.data as any).taskData
• CRUD 操作完成后，始终调用 args.endEdit() 通知甘特图
• 删除单条与多条记录：检查 args.data.length
• 通过 super.next() / this.next() 发出更新后的数据，以刷新 UI
• 妥善处理错误，并确保即使操作失败也会调用 endEdit()

任务排程

📄 阅读： references/task-scheduling.md

• taskMode：'Auto'（默认）、'Manual'、'Custom'（通过布尔字段按任务设置）
• Auto 模式：根据依赖关系、工作时间和节假日计算日期
• Manual 模式：数据源中的所有日期均按原样固定；使用 validateManualTasksOnLinking 可在建立链接时仍进行调整
• Custom 模式：通过数据源中映射的布尔字段按任务进行排程
• 未排程任务（allowUnscheduledTasks）——部分日期、浮动条
• durationUnit：'Day' | 'Hour' | 'Minute' | 'Week' | 'Month'
• 内嵌数值的持续时间单位：'5 days'、'2 weeks'、'1 month'
• daysPerWeek 和 daysPerMonth——控制基于周/月的排程换算
• 工作日： workWeek 数组（默认周一至周五）；includeWeekend: true 会将 7 天全部设为工作日
• 工作时间： dayWorkingTime——{ from, to } 范围数组（默认 8–17）；会影响按小时计算的持续时间
• 基线日期（renderBaseline、baselineStartDate、baselineEndDate、baselineDuration、baselineColor）以及用于自定义基线渲染的 baselineTemplate
• 使用 work 字段和 workUnit 进行工作量排程（以工作量驱动）

日历设置

📄 阅读： references/calendar-settings.md

• calendarSettings——甘特图的顶层日历配置
• calendarSettings.projectCalendar——所有任务的默认工作日、工作时间、节假日和例外设置
• calendarSettings.taskCalendar——用于按班次、团队或区域排程的任务专属日历
• taskFields.calendarId——将任务记录映射到命名任务日历- calendarSettings.taskCalendar 会对匹配的任务完全覆盖项目日历
• 任务日历会影响工作时间计算、持续时间计算、节假日、周末和依赖排程- hoursPerDay——将工作持续时间换算为基于天的持续时间值，用于显示和计算
• 日历例外允许针对特定日期覆盖工作时间和非工作时间
• 任务日历会覆盖已分配任务的项目日历
• 节假日、周末和工作时间规则会影响任务持续时间、依赖关系解析和任务条位置

任务依赖关系

📄 阅读： references/task-dependencies.md

• 依赖关系类型：FS（完成到开始）、SS、FF、SF——格式：'2FS'、'3SS+1d'
• 以逗号分隔的多个前置任务：'2FS,3SS'
• 前置任务的滞后/提前偏移量，使用 d/h/m 单位
• autoUpdatePredecessorOffset——在加载时将偏移值与实际位置同步
• allowParentDependency——启用父子层级间和跨层级依赖关系
• allowedDependencyTypes——将依赖关系的创建和编辑限制为选定类型
• 当 editSettings.allowTaskbarEditing: true 时，可通过拖动连接线进行编辑
• actionBegin requestType: 'validateLinkedTask'——处理依赖关系冲突
• 编程方式：addPredecessor()、removePredecessor()、updateRecordById()
• 使用 connectorLineWidth 和 connectorLineBackground 设置连接线样式

任务约束

📄 阅读： references/task-constraints.md

• 8 种约束类型：ASAP (0)、ALAP (1)、MSO (2)、MFO (3)、SNET (4)、SNLT (5)、FNET (6)、FNLT (7)
• 通过 taskFields.constraintType（数值）和 taskFields.constraintDate（Date）进行映射
• 约束仅在 Auto 模式下生效；在 Manual 模式下只存储、不生效
• 与依赖关系冲突时，会在 actionBegin 事件中显示

管理任务

📄 阅读： references/managing-tasks.md

• editSettings：allowEditing、allowAdding、allowDeleting、allowTaskbarEditing、mode（'Auto' | 'Dialog'）
• 按列设置 editType 以进行单元格编辑：'numericedit'、'defaultedit'、'dropdownedit'、'booleanedit'、'datepickeredit'
• 使用自定义选项卡配置进行对话框编辑（addDialogFields、editDialogFields）
• 编程操作：addRecord()、updateRecordById()、deleteRecord()、openAddDialog()、openEditDialog(id)
• 展开/折叠：expandAll()、collapseAll()、expandByID(id)、collapseByID(id)；事件：expanding、expanded、collapsing、collapsed
• 通过 actionBegin 事件进行验证（设置 args.cancel = true 以阻止操作）
• 通过 actionComplete 和检查 requestType 实现服务器端 CRUD
• 通过工具栏或 indent() / outdent() 方法更改层级缩进

拆分和合并任务

📄 阅读： references/splitting-and-merging.md

• 层级数据使用 taskFields.segments；自引用数据使用 taskFields.segmentId
• 可在加载时拆分，也可通过对话框的 Segments 选项卡或上下文菜单 SplitTask 动态拆分
• 通过上下文菜单 MergeTask 或拖动各任务段使其合并
• 使用 onTaskbarClick 中的 segmentIndex 检测被点击的任务段
• 限制：父任务和里程碑任务不能拆分；与多任务条资源视图不兼容

资源

📄 阅读： references/resources.md

• resources（数据）+ resourceFields（字段映射：id、name、unit、group）
• 使用 taskFields.resourceInfo 将资源关联到任务
• 资源视图模式（viewType: 'ResourceView'），每个资源显示一行
• showOverAllocationAsMultiTaskbar — 为超额分配的资源显示堆叠任务条
• allowTaskbarOverlap — 控制资源行中的任务条是重叠还是堆叠（并影响同一资源的依赖关系显示）
• 基于工时的排程：work 字段、taskType（'FixedWork'、'FixedDuration'、'FixedUnit'）
• 工时单位：workUnit: 'Hour' | 'Day' | 'Minute'

日历设置

📄 阅读： references/calendar-settings.md

• 项目日历为整个项目定义默认工作安排
• 任务日历可让特定任务遵循自己的工作日、假期和例外设置
• calendarId 用于选择任务记录所使用的任务日历
• hoursPerDay 控制如何解释以天为单位的工期值
• 任务日历不会与项目日历合并；对指定任务而言，任务日历优先
• 对于多班次、多团队或特定地区的排程需求，请使用任务日历

列

📄 阅读： references/columns.md

• 列属性：field、headerText、width、format、type、template、headerTemplate
• 列重排（allowReordering）、调整大小（allowResizing）
• 冻结列（freeze: 'Left' | 'Right'）— 需要 FreezeService
• 通过 queryCellInfo 跨列
• 使用 treeColumnIndex 设置用于展开/折叠树结构的列
• WBS（工作分解结构）列，使用 columnType: 'WBS'
• 序号列，使用 enableSerialNumber: true 和 field: 'SerialNumber'
• 排序、筛选、虚拟化、行拖放、分页、CRUD 和层级更改后，序号会重新计算
• 筛选、搜索、排序、展开/折叠、缩进、CRUD、行拖放和数据刷新后重新计算
• 列菜单（showColumnMenu）— 排序、筛选、自动调整列宽、列选择器
• CRUD 操作要求设置 isPrimaryKey

时间线

📄 阅读： references/timeline.md

• timelineSettings 配置
• 自定义顶层和底层
• 时间线视图模式（日/周/月/年）
• 带有 (date, format, tier, mode) 参数的格式化函数
• 时间线单元格宽度（timelineUnitSize）
• 自定义日期格式
• projectStartDate 和 projectEndDate
• 时间线视图窗口（viewStartDate / viewEndDate）
• 一周的起始日（weekStartDay）
• 自动更新时间刻度（updateTimescaleView）
• 无限时间线滚动（enableInfiniteTimelineScroll）
• 周末高亮显示（timelineSettings.showWeekend）
• 时间线单元格工具提示（showTooltip）
• timelineTemplate — 在刻度标题单元格中使用自定义 HTML（通过 <ng-template #timelineTemplate let-data>，使用 data.date、data.value、data.tier）
• 导航时间线（previousTimeSpan() / nextTimeSpan()）
• 放大和缩小

任务栏

📄 阅读： references/taskbar.md

• taskbarTemplate、parentTaskbarTemplate、milestoneTemplate — 完全自定义模板
• labelSettings：leftLabel、rightLabel、taskLabel（字段名称或模板）
• 使用 ng-template 的标签模板，可渲染丰富内容
• queryTaskbarInfo — 动态样式：taskbarBgColor、progressBarBgColor、taskbarBorderColor
• 单个任务上的 indicators / 数据标记：date、iconClass、label、tooltip
• 通过 tooltipSettings.taskbar 模板自定义工具提示
• taskbarHeight、taskbarCornerRadius、allowTaskbarDragAndDrop

绘制任务栏

📄 阅读： references/taskbar-draw.md

• editSettings.allowTaskbarDraw — 启用直接在时间线上绘制任务栏，以创建或安排尚未安排的任务
• 任务栏绘制行为和用户工作流
• 排程输出：根据绘制范围生成 StartDate、EndDate、Duration
• 完全未安排、部分安排、父级、子级、里程碑和手动安排的任务场景
• 此功能与任务栏编辑、对话框编辑、单元格编辑、验证、工作时间和日历规则的交互
• 包含工具栏和列配置的实现示例
• 最佳实践和限制

筛选和搜索

📄 阅读： references/filtering-and-searching.md

• allowFiltering: true + FilterService — 菜单和 Excel 筛选类型
• filterSettings.type：'Menu'（默认）| 'Excel'
• filterSettings.hierarchyMode：'Parent' | 'Child' | 'Both' | 'None'
• 通过 filterSettings.columns 数组设置加载时的初始筛选
• 搜索：allowSearching: true + 工具栏中的 'Search'
• searchSettings：fields、operator、ignoreCase
• 编程方式：filterByColumn()、clearFiltering()、search()

排序

📄 阅读： references/sorting.md

• allowSorting: true + SortService — 点击列标题进行排序
• 按列禁用：{ field: 'TaskID', allowSorting: false }
• 多列排序：按住 Ctrl 并点击其他列标题；按住 Shift 并点击可移除排序
• 通过 sortSettings.columns 数组设置加载时的初始排序
• 编程方式：sortColumn()、removeSortColumn()、clearSorting()

行

📄 阅读： references/rows.md

• rowDataBound / queryCellInfo — 动态设置行/单元格样式
• rowHeight — 统一的行高（像素），必须大于 taskbarHeight
• 通过 queryCellInfo 使用 rowSpan — 纵向跨单元格
• allowRowDragAndDrop — 拖动行以重新排序/设置父子关系；rowDrop 事件
• indent() / outdent() — 更改所选行的层级
• autoFocusTasks — 选中行时聚焦匹配的任务栏

选择

📄 阅读： references/selection.md

• allowSelection: true + SelectionService — 任何选择功能都必须配置
• selectionSettings.mode：'Row'（默认）| 'Cell' | 'Both'
• selectionSettings.type：'Single'（默认）| 'Multiple'（按住 Ctrl 并单击以多选）
• selectionSettings.enableToggle — 单击已选中的行可取消选择
• selectionSettings.hierarchyMode / 层级复选框选择模式：'Self' | 'Hierarchy' | 'FilteredHierarchy'
• 单元格选择模式：'Flow' | 'Box' | 'BoxWithBorder'
• 编程方式：selectRow()、selectRows()、selectCell()、clearSelection()、getSelectedRecords()

滚动

📄 阅读： references/scrolling.md

• enableVirtualization: true + VirtualScrollService — 对大型数据集进行 DOM 虚拟化
• enableTimelineVirtualization — 独立对时间线列进行虚拟化
• 分隔条：splitterSettings.position（百分比字符串或像素值）、columnIndex、view（'Default' | 'Grid' | 'Chart'）
• 编程方式：scrollToDate('04/02/2024')、scrollToTaskbar(taskId)
• 虚拟滚动限制：不支持行/列模板、分组和部分汇总功能

工具栏

📄 阅读： references/toolbar.md

• 必须配置 ToolbarService；将 toolbar 设置为字符串数组或混合的 ItemModel 数组
• 内置项：'Add'、'Edit'、'Delete'、'Update'、'Cancel'、'ExpandAll'、'CollapseAll'、'Search'、'Indent'、'Outdent'、'ZoomIn'、'ZoomOut'、'ZoomToFit'、'ExcelExport'、'CsvExport'、'PdfExport'、'CriticalPath'、'Undo'、'Redo'、'SplitTask'、'MergeTask'、'ColumnChooser'
• 通过 ItemModel 添加自定义项：text、id、prefixIcon、align、tooltipText
• 使用 { type: 'Separator' } 添加视觉分隔线
• toolbarClick 事件 — 使用 args.item.id 识别被单击的项（格式：'{ganttId}_{itemId}'）
• 通过编程方式启用/禁用：enableToolbarItems() / disableToolbarItems()

编程方法

📄 阅读： references/gantt-methods.md

• 列工具：autoFitColumns()
• 编辑控制：cancelEdit()、openAddDialog()、openEditDialog()
• 任务管理：deleteRecord()、convertToMilestone()、changeTaskMode()、updateRecordByID()、updateRecordByIndex()、updateTaskId()、updateDataSource()、updateProjectDates()
• 工具栏控制：enableItems()
• 展开/折叠：expandByIndex()、expandByID()、collapseByIndex()、collapseByID()
• 撤销/重做栈：clearUndoCollection()、clearRedoCollection()、getUndoActions()、getRedoActions()
• 数据检索：getCurrentViewData()、getRecordByID()、getTaskByUniqueID()、getTaskInfo()、getTaskbarHeight()、getExpandedRecords()、getGanttColumns()、getGridColumns()
• 格式化辅助方法：getDurationString()、getWorkString()
• DOM 访问：getRowByID()、getRowByIndex()
• 排序：removeSortColumn()
• 选择：selectCells()
• 行重排：reorderRows()
• 滚动：scrollToTask()、updateChartScrollOffset()

事件

📄 阅读： references/events.md

• 生命周期：load、created、dataBound、destroyed
• 编辑生命周期：actionBegin（通过 args.cancel = true 取消）、actionComplete、actionFailure
• 任务栏：taskbarEditing、taskbarEdited、onTaskbarClick、queryTaskbarInfo
• 行/单元格：rowDataBound、queryCellInfo、rowSelected、rowDeselected、cellSelected
• 展开/折叠：expanding、expanded、collapsing、collapsed
• 导出：beforeExcelExport、excelExportComplete、beforePdfExport、pdfExportComplete、pdfQueryTaskbarInfo
• recordDoubleClick — 双击时打开自定义编辑界面

上下文菜单

📄 阅读： references/context-menu.md

• enableContextMenu: true + ContextMenuService — 右键点击行或表头
• 默认项包括：'AutoFitAll'、'AutoFit'、'SortAscending'、'SortDescending'、'Add'、'Edit'、'Delete'、'Save'、'Cancel'、'Indent'、'Outdent'、'TaskInformation'、'SplitTask'、'MergeTask'
• 通过 ContextMenuItemModel 添加自定义项：text、id、iconCss、target（行/表头）
• contextMenuOpen — 根据行动态隐藏/显示菜单项
• contextMenuClick — 处理菜单项选择

节假日和事件标记

📄 阅读： references/holidays-and-markers.md

• 节假日和事件标记都需要 DayMarkersService
• holidays：{ from, to?, label, cssClass } 数组 — 不计入工作时间的日期，会延长任务工期
• eventMarkers：{ day, label, cssClass, top? } 数组 — 在指定日期显示贯穿全高的垂直线
• 通过 cssClass 和 CSS（针对 .e-gantt-event-marker / .e-span-label）按类型自定义样式
• top 属性用于错开同一日期重叠的标记

关键路径

📄 阅读： references/critical-path.md

• enableCriticalPath: true + CriticalPathService — 将时差为零或负值的任务标红
• 'CriticalPath' 工具栏项 — 用户切换按钮
• getCriticalTasks() — 返回包含 slack 值的 IGanttData 对象数组
• queryTaskbarInfo + ganttProperties.isCritical — 按任务条件着色
• CSS 覆盖项：.e-critical-path-container、.e-critical-connector-line
• 规则：已完成的任务（100%）不计入；父任务和子任务的关键性彼此独立；任何更改都会自动重新计算

导出（Excel 和 PDF）

📄 阅读： references/export.md

• Excel：allowExcelExport: true + ExcelExportService；调用 excelExport() / csvExport()
• PDF：allowPdfExport: true + PdfExportService；调用 pdfExport()
• ExcelExportProperties：fileName、dataSource、includeHiddenColumn、header、footer
• PdfExportProperties：fileName、pageOrientation、pageSize、fitToWidthSettings、ganttStyle、theme
• PDF 页眉/页脚内容类型：Text、Line、PageNumber、Image
• 导出为单页：fitToWidthSettings.isFitToWidth: true
• Blob 导出：pdfExport({}, true) → 在 pdfExportComplete 事件中获取 Blob
• 通过串联调用 pdfExport() 和 multipleExport，将多个 Gantt 导出到同一个 PDF
• pdfQueryTaskbarInfo — 设置 PDF 输出中各任务栏的颜色

撤销 / 重做

📄 阅读： references/undo-redo.md

• enableUndoRedo: true + UndoRedoService — 默认最多支持 10 步
• undoRedoActions 数组 — 选择要跟踪的操作类型（支持 18 种操作）
• undoRedoStepsCount — 配置历史记录深度
• 键盘操作：Ctrl+Z / Ctrl+Y；程序调用：undo() / redo()
• 历史记录耗尽时，'Undo' / 'Redo' 工具栏项会自动禁用

状态持久化

📄 阅读： references/state-persistence.md

• enablePersistence: true — 将筛选、排序和列状态保存到 localStorage，键名为 '{id}gantt'
• <ejs-gantt> 元素必须设置唯一的 id
• 重置方法：clearStorage()、手动移除 localStorage 键，或设置新的 id
• 不可变模式（enableImmutableMode）— 仅重新渲染发生更改的行，提升大型数据集的性能
• 加载动画：loadingIndicator.indicatorType — 'Spinner'（默认）| 'Shimmer'
• 手动控制加载动画：showSpinner() / hideSpinner()

本地化、RTL 和格式

📄 阅读： references/localization-rtl.md

• locale 属性 + setCulture() + L10n.load() — 翻译所有甘特图 UI 字符串
• 'gantt' 命名空间的完整区域设置键参考
• RTL：[enableRtl]="true" + locale="ar" — 反转布局方向
• timezone — IANA 时区字符串（例如 'America/New_York'、'UTC'），用于确保跨地区日期一致
• 列日期格式：format 字符串或 { type: 'date', skeleton: 'yMd' }
• 列数字格式：'N2'、'C2'、'P1' 等

---

快速入门示例

import { Component } from '@angular/core';
import { GanttModule, EditService, SortService, FilterService, ToolbarService, SelectionService } from '@syncfusion/ej2-angular-gantt';

@Component({
  imports: [GanttModule],
  standalone: true,
  providers: [EditService, SortService, FilterService, ToolbarService, SelectionService],
  selector: 'app-root',
  template: `
    <ejs-gantt
      [dataSource]="data"
      [taskFields]="taskFields"
      [height]="'450px'"
      [toolbar]="toolbar"
      [allowFiltering]="true"
      [allowSorting]="true"
      [editSettings]="editSettings">
    </ejs-gantt>
  `
})
export class AppComponent {
  // Default: self-referential data (flat array with id + parentID)
  // Use hierarchical (child array) only if user explicitly requests it
  public data: object[] = [
    { TaskID: 1, TaskName: 'Project Initiation',    StartDate: new Date('04/02/2024'), Duration: 5,  Progress: 0,  ParentID: null },
    { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 },
    { TaskID: 3, TaskName: 'Perform Soil test',      StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1 },
    { TaskID: 4, TaskName: 'Soil test approval',     StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50, ParentID: 1, Predecessor: '3FS' }
  ];
  public taskFields: object = {
    id: 'TaskID',         // idMapping
    name: 'TaskName',
    startDate: 'StartDate',
    duration: 'Duration',
    progress: 'Progress',
    dependency: 'Predecessor',
    parentID: 'ParentID'  // parentIdMapping — null = root task
  };
  public toolbar: string[] = ['Add', 'Edit', 'Delete', 'ExpandAll', 'CollapseAll', 'Search'];
  public editSettings: object = { allowEditing: true, allowAdding: true, allowDeleting: true, allowTaskbarEditing: true };
}

---

常见模式

用户需要编辑任务时

→ 设置 editSettings.allowEditing: true，注入 EditService → 单元格编辑使用 mode: 'Auto'，对话框编辑使用 mode: 'Dialog'

用户需要提升大型数据集的性能时

→ 阅读 references/scrolling.md — 启用 enableVirtualization: true + VirtualScrollService

用户需要导出数据时

→ 阅读 references/export.md — 注入 ExcelExportService 或 PdfExportService

用户需要管理资源时

→ 阅读 references/resources.md — 配置 resources + resourceFields

用户需要根据日历安排任务时

→ 阅读 references/calendar-settings.md — 配置 calendarSettings、calendarId 和 hoursPerDay

用户需要撤销/重做时

→ 阅读 references/undo-redo.md — 注入 UndoRedoService，设置 enableUndoRedo: true

用户需要本地化或 RTL 时

→ 阅读 references/localization-rtl.md — 在 bootstrap 前调用 L10n.load()，设置 locale 和 enableRtl

用户需要持久化状态时

→ 阅读 references/state-persistence.md — 设置 enablePersistence: true 和唯一的 id

用户需要拆分/合并任务时

→ 阅读 references/splitting-and-merging.md — 映射 taskFields.segments，注入 EditService

---

关键模块注入

功能	要注入的服务
编辑（添加/编辑/删除/拖动任务栏）	EditService
筛选	FilterService
排序	SortService
工具栏	ToolbarService
选择	SelectionService
日期标记 / 节假日 / 事件标记	DayMarkersService
关键路径	CriticalPathService
Excel / CSV 导出	ExcelExportService
PDF 导出	PdfExportService
撤销 / 重做	UndoRedoService
列菜单	ColumnMenuService
上下文菜单	ContextMenuService
虚拟滚动	VirtualScrollService
行拖放	RowDDService
列重排	ReorderService
冻结列	FreezeService
列调整大小	ResizeService

---

关键属性参考

属性	类型	默认值	描述
dataSource	object[] | DataManager	[]	任务数据 — 自引用（扁平）或分层数据
taskFields	TaskFieldsModel	—	将数据字段映射到甘特图任务属性
height	string | number	'auto'	组件高度（例如 '450px'）
taskMode	string	'Auto'	排程模式：'Auto' | 'Manual' | 'Custom'
editSettings	EditSettingsModel	—	启用添加、编辑、删除、任务栏编辑和编辑模式
toolbar	string[] | ItemModel[]	—	工具栏按钮 — 需要 ToolbarService
allowFiltering	boolean	false	启用列筛选菜单 — 需要 FilterService
filterSettings	FilterSettingsModel	—	type、hierarchyMode、columns（初始筛选条件）
allowSorting	boolean	false	启用列排序 — 需要 SortService
sortSettings	SortSettingsModel	—	用于加载时初始排序的 columns 数组
allowSelection	boolean	true	启用行／单元格选择 — 需要 SelectionService
selectionSettings	SelectionSettingsModel	—	mode、type、enableToggle、cellSelectionMode
enableCriticalPath	boolean	false	高亮显示关键路径 — 需要 CriticalPathService
enableUndoRedo	boolean	false	启用撤销／重做 — 需要 UndoRedoService
undoRedoActions	string[]	(所有操作)	要在历史记录中跟踪的操作类型
undoRedoStepsCount	number	10	撤销／重做历史记录的最大深度
enablePersistence	boolean	false	将筛选、排序和列状态保存到 localStorage
enableImmutableMode	boolean	false	刷新数据时仅重新渲染更改的行
allowExcelExport	boolean	false	启用 Excel 导出 — 需要 ExcelExportService
allowPdfExport	boolean	false	启用 PDF 导出 — 需要 PdfExportService
enableContextMenu	boolean	false	启用右键快捷菜单 — 需要 ContextMenuService
contextMenuItems	string[] | ContextMenuItemModel[]	(默认值)	快捷菜单项
enableVirtualization	boolean	false	对大型数据集启用 DOM 虚拟化 — 需要 VirtualScrollService
enableTimelineVirtualization	boolean	false	对时间线列启用虚拟化
renderBaseline	boolean	false	在当前任务栏旁显示基线栏
baselineTemplate	string | TemplateRef	—	用于呈现基线栏的自定义模板
baselineColor	string	'red'	基线栏颜色
allowUnscheduledTasks	boolean	false	允许缺少开始日期、结束日期或工期的任务
validateManualTasksOnLinking	boolean	false	更改依赖关系链接时调整手动任务日期
allowParentDependency	boolean	true	允许父任务与子任务之间存在依赖关系
autoUpdatePredecessorOffset	boolean	false	加载时将前置任务偏移量与实际位置同步
enableInfiniteTimelineScroll	boolean	false	启用时间线无限水平滚动
highlightWeekends	boolean	false	在时间线中为周末列着色
gridLines	string	'Both'	网格线：'Both' | 'Horizontal' | 'Vertical' | 'None'
rowHeight	number	36	每行的高度，单位为像素
allowRowDragAndDrop	boolean	false	拖动行以重新排序或更改父级
showColumnMenu	boolean	false	列标题快捷菜单 — 需要 ColumnMenuService
timelineSettings	TimelineSettingsModel	—	topTier、bottomTier、timelineUnitSize、weekStartDay
timelineViewMode	string	—	快捷设置：'Hour' | 'Day' | 'Week' | 'Month' | 'Year'
projectStartDate	Date | string	(来自数据)	固定时间线起始边界
projectEndDate	Date | string	(来自数据)	固定时间线结束边界
holidays	HolidayModel[]	[]	带标签的非工作日 — 需要 DayMarkersService
eventMarkers	EventMarkerModel[]	[]	垂直标记线 — 需要 DayMarkersService
resources	object[]	—	资源数据数组
resourceFields	ResourceFieldsModel	—	将资源的 id、name、unit、group 字段映射到对应属性
locale	string	'en-US'	本地化区域代码（例如 'fr'、'ar'）
enableRtl	boolean	false	从右向左布局
timezone	string	(浏览器)	IANA 时区（例如 'UTC'、'America/New_York'）
durationUnit	string	'Day'	默认工期单位：'Day' | 'Hour' | 'Minute'
workUnit	string	'Hour'	工作排程单位：'Hour' | 'Day' | 'Minute'
workWeek	string[]	周一至周五	工作日：['Monday','Tuesday','Wednesday','Thursday','Friday']
includeWeekend	boolean	false	将每周 7 天都视为工作日
dayWorkingTime	object[]	[{from:8,to:17}]	每天的工作时间范围：[{ from: 8, to: 12 }, { from: 13, to: 17 }]
dateFormat	string	'MM/dd/yyyy'	所有日期列的全局日期显示格式
splitterSettings	SplitterSettingsModel	—	用于设置 TreeGrid／图表分割的 position、columnIndex、view
loadingIndicator	LoadingIndicatorModel	—	indicatorType：'Spinner' | 'Shimmer'