syncfusion-javascript-gantt-chart

用途

该技能用于在 JavaScript/TypeScript 项目中实现 Syncfusion Essential JS 2 的 Gantt Chart 组件（ej2-gantt），面向项目排程、任务管理、资源分配与工期可视化等场景，覆盖从初始搭建到进阶功能的完整实现过程。

主要能力

安装与初始化：npm 安装、webpack 配置、基础初始化（app.ts + index.html）、taskFields 映射、模块注入、actionFailure 错误处理。
数据绑定：本地层级数据、扁平自引用数据、远程 DataManager（WebApiAdaptor、UrlAdaptor）、按需加载子任务、Ajax 绑定、拆分任务。
任务排程：taskMode 的 Auto/Manual/Custom 模式、未排程任务（allowUnscheduledTasks）、工期单位（Day/Hour/Minute/Week/Month）、daysPerWeek 与 daysPerMonth、里程碑、项目起止日期、工时与工作日配置、周末高亮。
任务约束：ASAP/ALAP/MSO/MFO/SNET/SNLT/FNET/FNLT 等约束类型、validateMode 校验标志、与 taskMode 的交互、通过对话框或 updateRecordByID 编辑约束。
任务依赖：FS/SS/FF/SF 类型与滞后偏移、多前置任务、连接线定制、addPredecessor/removePredecessor/updatePredecessor 方法、校验模式、allowedDependencyTypes 限制类型、动态显示或隐藏依赖线。
日历设置：项目日历与任务日历、workingTime、holidays、exceptions、hoursPerDay、workWeek 与工作日配置。
关键路径与基线：enableCriticalPath、松弛计算、renderBaseline、baselineColor、基线里程碑、baselineTemplate 自定义渲染。
资源管理：resourceFields 映射、资源分配与单位、过度分配、资源模板、ResourceView 视图、多任务条（enableMultiTaskbar）、Work 与任务类型（FixedWork、FixedDuration、FixedUnit）。
列与时间线：columns 定义、treeColumnIndex、序列号列、复选框列、响应式列、列跨越与模板、WBS 列、列宽调整、列重排、列菜单、冻结列；topTier/bottomTier、timelineSettings、缩放。
交互与编辑：排序、筛选、搜索、选择（行/单元格/复选框、hierarchyCheckboxMode）、行拖放与缩进/取消缩进、编辑（单元格/对话框/任务条拖拽）、任务条绘制创建任务、撤销/重做、工具栏、上下文菜单。
显示与导出：事件标记、数据标记、标签、导出 Excel 或 PDF、本地化、RTL、时区、状态持久化、虚拟滚动、immutable 模式。

使用方式

通过 npm 安装 @syncfusion/ej2-gantt，在代码中导入并注入所需模块（如 Edit、Filter、Sort、Toolbar），创建 Gantt 实例并配置 dataSource、taskFields、toolbar、editSettings、allowSorting、allowFiltering 等属性，最后调用 appendTo 挂载到容器。

示例代码：

import { Gantt, Edit, Filter, Sort, Toolbar } from '@syncfusion/ej2-gantt';

Gantt.Inject(Edit, Filter, Sort, Toolbar);

let gantt: Gantt = new Gantt({
    dataSource: [
        {
            TaskID: 1, TaskName: 'Project Initiation',
            StartDate: new Date('04/02/2024'), EndDate: new Date('04/21/2024'),
            subtasks: [
                { TaskID: 2, TaskName: 'Identify Site location', StartDate: new Date('04/02/2024'), Duration: 4, Progress: 50 },
                { TaskID: 3, TaskName: 'Soil test approval', StartDate: new Date('04/02/2024'), Duration: 4, Predecessor: '2FS', Progress: 50 }
            ]
        }
    ],
    height: '450px',
    taskFields: { id: 'TaskID', name: 'TaskName', startDate: 'StartDate', endDate: 'EndDate', duration: 'Duration', progress: 'Progress', dependency: 'Predecessor', child: 'subtasks' },
    toolbar: ['Add', 'Edit', 'Delete', 'Update', 'Cancel', 'ExpandAll', 'CollapseAll', 'Search'],
    editSettings: { allowAdding: true, allowEditing: true, allowDeleting: true, allowTaskbarEditing: true },
    allowSorting: true,
    allowFiltering: true
});
gantt.appendTo('#Gantt');

适用场景

适用于需要在 Web 应用中构建项目排程视图、任务进度跟踪、资源分配与工期可视化界面的开发场景，可根据需要组合使用数据绑定、依赖关系、关键路径、资源视图、导出等能力。

限制

部分功能存在已知约束，例如单元格选择不支持 enableVirtualization；任务条绘制的父任务不能直接绘制；基线模板需对父行返回空字符串。其他具体限制与价格、平台支持等信息暂未提供。

技能介绍

用途

主要能力

使用方式

适用场景

限制