這篇文章給大家講解如何利用dhtmlxGantt在服務器端集成數據。

DhtmlxGantt正版試用下載

腳本數據保存

如果您已初始化dataProcessor，則用戶或以編程方式所做的任何更改都將自動保存在數據源中。通常，要以編程方式更新特定任務或依賴項，請分別使用updateTask和updateLink方法：

gantt.parse([
   {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"},
   {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"}
],"json");
 
gantt.getTask(1).text = "Task 111"; //changes task's data
gantt.updateTask(1); // renders the updated task

自定義路由器

 如果后端不需要RESTful AJAX API，或者如果您想手動控制發送到服務器的內容，您可以使用自定義路由。

例如，如果您使用Angular、React或任何其他框架，其中頁面上的組件不會將更改直接發送到服務器，而是將它們傳遞給負責數據保存的不同組件。

 要為DataProcessor提供自定義路由選項，您應該使用createDataProcessor()方法：

gantt.createDataProcessor(function(entity, action, data, id){
    const services = {
        "task": this.taskService,
        "link": this.linkService
    };
    const service = services[entity];
 
    switch (action) {
        case "update":
            return service.update(data);
        case "create":
            return service.insert(data);
        case "delete":
            return service.remove(id);
    }
});

使用AJAX設置自定義路由器

Gantt AJAX模塊可用于設置自定義路由。Gantt期望自定義路由器作為操作的結果返回一個Promise對象，這允許捕獲操作的結束。AJAX模塊支持Promise，適合在自定義路由器內部使用。甘特圖會得到Promise并處理Promise的內容，當它被解決時。

在下面的示例中，創建了一個新任務。如果服務器響應包含新創建任務的id，甘特圖將能夠應用它。

gantt.createDataProcessor(function(entity, action, data, id){
...
 
  switch (action) {
    case "create":
      return gantt.ajax.post({
        headers: { 
          "Content-Type": "application/json" 
        },
        url: server + "/task",
        data: JSON.stringify(data)
      });
    break;
  }
});

錯誤處理

服務器可以通過返回"action":"error"響應來通知Gantt操作失敗：

{"action":"error"}

可以在gantt.dataProcessor的幫助下在客戶端捕獲這樣的響應：

var dp = gantt.createDataProcessor({
  url: "/api",
  mode:"REST"
});
dp.attachEvent("onAfterUpdate", function(id, action, tid, response){
    if(action == "error"){
        // do something here
    }
});

響應對象可能包含任意數量的附加屬性，它們可以通過responseonAfterUpdate處理程序的參數。

如果服務器響應您的某些操作錯誤但更改已保存在客戶端上，則同步其狀態的最佳方法是清除客戶端的狀態，并從服務器端重新加載正確的數據：

dp.attachEvent("onAfterUpdate", function(id, action, tid, response){
    if(action == "error"){
        gantt.clearAll();
        gantt.load("url1");
    }
});

如果您想同步客戶端-服務器端但不想進行任何服務器調用，您可以使用silent()方法，該方法使其中的所有代碼不會觸發內部事件或服務器調用：

gantt.silent(function(){
    gantt.deleteTask(item.id);
});
 
gantt.render();

dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理控件應用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關內容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

甘特圖控件交流群：764148812    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！