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

DhtmlxGantt正版試用下載

客戶端

1)調用load方法，其中作為參數指定以JSON格式返回甘特圖數據的URL。

2)使用以下兩種方式之一創建DataProcessor實例：

• 初始化DataProcessor并將其附加到dhtmlxGantt對象：

gantt.init("gantt_here");
gantt.load("apiUrl");
 
// keep the order of the lines below
var dp = new gantt.dataProcessor("apiUrl");
dp.init(gantt);
dp.setTransactionMode("REST");

• 調用createDataProcessor方法并傳遞一個帶有配置選項的對象作為其參數：

var dp = gantt.createDataProcessor({
      url: "apiUrl",
      mode: "REST"
});

創建數據處理器

1.使用預定義的請求模式之一，如：

var dp = gantt.createDataProcessor({
   url: "/api",
   mode: "REST"
});

位置：

• url-服務器端的URL
• mode-向服務器發送數據的模式：“JSON”|“REST-JSON”|“JSON”|“郵政”|“得到”

2.提供自定義路由器對象：

var dp = gantt.createDataProcessor(router);

• 其中路由器是一個功能：

// entity - "task"|"link"
// action - "create"|"update"|"delete"
// data - an object with task or link data
// id – the id of a processed object (task or link)
var dp = gantt.createDataProcessor(function(entity, action, data, id) { 
    switch(action) {
        case "create":
           return gantt.ajax.post(
                server + "/" + entity,
                data
           );
        break;
        case "update":
           return gantt.ajax.put(
                 server + "/" + entity + "/" + id,
                 data
            );
        break;
        case "delete":
           return gantt.ajax.del(
                 server + "/" + entity + "/" + id
           );
         break;
   }
});

或是以下結構的對象：

var dp = gantt.createDataProcessor({ 
   task: {
      create: function(data) {},
      update: function(data, id) {},
      delete: function(id) {}
   },
   link: {
      create: function(data) {},
      update: function(data, id) {},
      delete: function(id) {}
   }
});

對象的所有函數都路由器應該返回一個Promise或一個數據響應對象。 這是 dataProcessor應用數據庫id并掛鉤onAfterUpdate事件所必需的。

outer = function(entity, action, data, id) {
    return new gantt.Promise(function(resolve, reject) {
        // … some logic
        return resolve({tid: databaseId});
    });
}

因此，您可以使用DataProcessor將數據保存在localStorage或任何其他未鏈接到某個URL的存儲中，或者如果有兩個不同的服務器(URL)負責創建和刪除對象。

請求和響應詳細信息

URL由以下規則構成：

• api/鏈接/id
• api/任務/id

其中“api”是您在dataProcessor配置中指定的URL。

可能的請求和響應的列表是：

請求參數

創建/更新/刪除請求將包含客戶端任務或鏈接對象的所有公共屬性：

任務：

• 開始日期 ：2017-04-08 00:00:00
• 持續時間 ：4
• 文本 ：任務#2.2
• 父級 ：3
• 結束日期 ：2017-04-12 00:00:00

關聯：

• 來源 ：1
• 目標 ：2
• 類型 ：0

筆記：

• 格式start_date和end_date參數由date_format配置定義。
• 客戶端發送任務或鏈接對象的所有公共屬性。 因此，請求可以包含任意數量的附加參數。
• 如果您通過向其添加新列/屬性來擴展數據模型，則不需要額外的操作來使甘特圖將它們發送到后端。

REST-JSON 模式

除了“POST”、“GET”、“REST”和“JSON”事務模式，甘特數據處理器也可以用于“REST-JSON”模式。

gantt.load("apiUrl");
 
var dp = gantt.createDataProcessor({
      url: "/apiUrl",
      mode: "REST-JSON"
});

在REST模式中，數據以以下形式發送到服務器：

Content-Type: application/x-www-form-urlencoded

而在REST-JSON模式下，數據以JSON格式發送：

Content-type: application/json

因此參數作為JSON對象發送，請求有效載荷

• 任務

{
    "start_date": "20-09-2018 00:00",
    "text": "New task",
    "duration":1,
    "end_date": "21-09-2018 00:00",
    "parent": 0,
    "usage":[{
        {"id":"1", "value":"30"},
        {"id":"2", "value":"20"}
    }]
}

• 關聯

{
    "source": 1,
    "target": 2,
    "type": "0"
}

這種格式使得在任何服務器端平臺上處理復雜記錄變得更加方便。

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

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

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