基于JavaScript：如何将Microsoft Project拆分任务功能迁移至dhtmlxgantt？

MS Project的“更新项目”核心是同步任务的实际执行数据（实际开始/结束时间、完成进度等）到计划中，dhtmlxgantt原生支持这些字段，可通过以下步骤实现：

• 字段映射：将MS Project的实际数据字段对应到dhtmlxgantt的内置字段：

  • Actual Start → actual_start
  • Actual Finish → actual_end
  • % Complete → progress（需转换为0-1的数值，如50%对应0.5）

• 交互功能实现：

  1. 添加“更新项目”按钮，绑定批量更新逻辑：

     // 绑定按钮点击事件
     document.getElementById('update-project-btn').addEventListener('click', () => {
       // 获取所有需要更新的任务（可按需筛选层级或状态）
       const tasks = gantt.getTaskByLevel(0).concat(gantt.getTaskByLevel(1));
       tasks.forEach(task => {
         // 示例：从页面表单获取实际数据（可替换为后端接口拉取）
         const actualStart = document.getElementById(`actual-start-${task.id}`).value;
         const actualEnd = document.getElementById(`actual-end-${task.id}`).value;
         const progress = parseFloat(document.getElementById(`progress-${task.id}`).value) / 100;
         
         // 更新甘特图任务数据
         gantt.updateTask(task.id, {
           actual_start: actualStart,
           actual_end: actualEnd,
           progress: progress
         });
       });
       gantt.render();
     });
     

  2. 从MS Project文件导入实际数据：使用mpp-parser等库解析mpp文件，批量同步数据：

     // 读取用户上传的mpp文件
     const reader = new FileReader();
     reader.onload = (e) => {
       const mppData = parseMpp(e.target.result); // 需引入mpp-parser库
       mppData.tasks.forEach(mppTask => {
         // 通过GUID或任务ID匹配甘特图中的任务
         const ganttTask = gantt.getTaskBy(mppTask.guid);
         if(ganttTask) {
           gantt.updateTask(ganttTask.id, {
             actual_start: mppTask.actualStart,
             actual_end: mppTask.actualFinish,
             progress: mppTask.percentComplete / 100
           });
         }
       });
       gantt.render();
     };
     reader.readAsArrayBuffer(mppFile); // mppFile为用户上传的文件对象
     

2.1 拆分任务数据导入 #

dhtmlxgantt通过segments字段存储拆分任务的多个时间段，每个段包含start_date和end_date。从MS Project导入时，只需转换数据格式：

// 示例：MS Project导出的拆分任务数据
const mppSplitTask = {
  id: 1,
  text: "场地平整",
  splitSegments: [
    { start: "2024-01-01", end: "2024-01-05" },
    { start: "2024-01-10", end: "2024-01-15" }
  ]
};

// 转换为dhtmlxgantt兼容格式
const ganttSplitTask = {
  id: mppSplitTask.id,
  text: mppSplitTask.text,
  type: "task",
  segments: mppSplitTask.splitSegments.map(seg => ({
    start_date: seg.start,
    end_date: seg.end
  }))
};

// 添加到甘特图
gantt.addTask(ganttSplitTask);

2.2 实现任务拆分交互 #

dhtmlxgantt提供内置的拆分任务插件，启用后可快速实现拆分功能：

1. 启用拆分插件：

   gantt.plugins({
     split_tasks: true
   });
   

2. 内置交互：启用插件后，用户可通过右键菜单选择“拆分任务”，或拖拽任务边缘创建拆分段；也可通过代码手动拆分：

   // 手动拆分任务的函数
   function splitTask(taskId, splitDate) {
     const task = gantt.getTask(taskId);
     const originalStart = task.start_date;
     const originalEnd = task.end_date;
     
     // 生成两个拆分段（拆分日期后间隔1天，可按需调整）
     const segments = [
       { start_date: originalStart, end_date: splitDate },
       { start_date: gantt.date.add(splitDate, 1, "day"), end_date: originalEnd }
     ];
     
     gantt.updateTask(taskId, { segments: segments });
     gantt.render();
   }
   
   // 调用示例：拆分ID为1的任务到2024-01-06
   splitTask(1, "2024-01-06");
   

3. 自定义拆分交互：监听任务双击事件，弹出日期选择器实现自定义拆分：

   gantt.attachEvent("onTaskDblClick", (id) => {
     const task = gantt.getTask(id);
     const splitDate = prompt("输入拆分日期（YYYY-MM-DD）:", gantt.date.toStr(task.start_date));
     if(splitDate && gantt.date.isValidDate(splitDate)) {
       splitTask(id, splitDate);
     }
     return true;
   });
   

内容的提问来源于stack exchange，提问作者Thailand BIM User