如何从Bryntum Gantt任务编辑器自定义字段获取更新数据

• 监听任务数据变更事件
  Bryntum Gantt的任务Store自带update事件，当任务字段（包括你自定义的phase字段）更新时会自动触发。直接在Gantt实例的任务Store上绑定事件即可捕获变更：

  gantt.taskStore.on('update', ({ record, changes }) => {
    // 仅当phase字段发生变更时执行同步
    if (changes.phase) {
      const updatedTask = record.data;
      // 调用后端接口同步数据，示例用fetch
      fetch('/your-backend-api', {
        method: 'POST',
        body: JSON.stringify(updatedTask),
        headers: { 'Content-Type': 'application/json' }
      });
    }
  });
  

• 批量获取所有修改数据
  如果需要批量同步而非实时单条提交，可使用Store的getModifiedRecords()方法获取所有被修改过的任务记录：

  // 获取所有修改后的任务数据
  const modifiedTasks = gantt.taskStore.getModifiedRecords().map(record => record.data);
  // 批量提交到后端
  fetch('/your-batch-sync-api', {
    method: 'POST',
    body: JSON.stringify(modifiedTasks),
    headers: { 'Content-Type': 'application/json' }
  });
  // 提交完成后清除修改标记，避免重复提交
  gantt.taskStore.commitChanges();
  

• 绑定任务编辑器保存事件
  若希望在用户完成任务编辑并保存时同步数据，可监听任务编辑器的save事件：

  gantt.taskEdit.on('save', ({ taskRecord }) => {
    // taskRecord包含编辑完成后的完整任务数据（含最新phase值）
    const updatedData = taskRecord.data;
    // 同步到后端
    fetch('/your-backend-api', {
      method: 'POST',
      body: JSON.stringify(updatedData),
      headers: { 'Content-Type': 'application/json' }
    });
  });
  

• 确认自定义字段配置正确性
  确保你已在自定义TaskModel中正确声明phase字段，否则Store无法识别并跟踪该字段的变更：

  class CustomTaskModel extends TaskModel {
    static get fields() {
      return [
        { name: 'phase', type: 'string' }
      ];
    }
  }
  
  // 初始化Gantt时使用自定义Model
  const gantt = new Gantt({
    taskModelClass: CustomTaskModel,
    // 其他Gantt配置项...
  });
  

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