如何构建适配gantt.parse方法的合法tasks任务对象数组

核心问题说明 #

• id类型不符合要求：接口返回的id为字符串类型，甘特图要求id为数字类型，需做类型转换
• 日期格式不匹配：当前生成的日期为YYYY-MM-DD格式，官方默认适配DD-MM-YYYY格式，可选择转换日期格式或修改甘特图配置适配现有格式
• 异步调用逻辑错误：AJAX为异步请求，若在请求外直接调用gantt.parse，数组还未完成填充，会出现索引异常问题

修正代码方案 #

方案1：转换日期格式适配默认配置 #

$.ajax(settings).done(function (response) {
  const tasks = response.result.tasks;
  const ganttData = [];
  
  Object(tasks).forEach(function (entry) {
    // 转换id为数字类型
    const taskId = Number(entry.id);
    // 转换日期格式 YYYY-MM-DD -> DD-MM-YYYY
    const startDateArr = entry.startDatePlan.substring(0,10).split('-');
    const formatStartDate = `${startDateArr[2]}-${startDateArr[1]}-${startDateArr[0]}`;
    const endDateArr = entry.endDatePlan.substring(0,10).split('-');
    // 计算任务持续天数
    const startTime = new Date(startDateArr[0], startDateArr[1]-1, startDateArr[2]).getTime();
    const endTime = new Date(endDateArr[0], endDateArr[1]-1, endDateArr[2]).getTime();
    const duration = Math.ceil((endTime - startTime) / (1000 * 60 * 60 * 24));

    ganttData.push({
      id: taskId,
      text: entry.title,
      start_date: formatStartDate,
      duration: duration
    })
  });

  // 数据组装完成后在回调内调用gantt.parse
  gantt.parse({
    data: ganttData,
    links: [] // 有任务关联关系可在此填充，无则留空数组
  })
});

方案2：修改甘特图配置适配现有日期格式 #

如果不想转换日期格式，可以在初始化甘特图前添加配置，直接适配YYYY-MM-DD格式：

// 放在gantt.init执行之前
gantt.config.date_format = "%Y-%m-%d";

添加配置后组装数据的代码可以简化为：

$.ajax(settings).done(function (response) {
  const tasks = response.result.tasks;
  const ganttData = tasks.map(entry => {
    const startTime = new Date(entry.startDatePlan).getTime();
    const endTime = new Date(entry.endDatePlan).getTime();
    const duration = Math.ceil((endTime - startTime) / (1000 * 60 * 60 * 24));
    return {
      id: Number(entry.id),
      text: entry.title,
      start_date: entry.startDatePlan.substring(0,10),
      duration: duration
    }
  })
  gantt.parse({
    data: ganttData,
    links: []
  })
});

内容的提问来源于stack exchange，提问作者GwynnBleiidd