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

DhtmlxGantt正版試用下載

客戶端

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

2)使用以下兩種方式之一創(chuàng)建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");

• 調(diào)用createDataProcessor方法并傳遞一個帶有配置選項的對象作為其參數(shù)：

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

創(chuàng)建數(shù)據(jù)處理器

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

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

位置：

• url-服務(wù)器端的URL
• mode-向服務(wù)器發(fā)送數(shù)據(jù)的模式：“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;
   }
});

或是以下結(jié)構(gòu)的對象：

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) {}
   }
});

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

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

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

請求和響應(yīng)詳細(xì)信息

URL由以下規(guī)則構(gòu)成：

• api/鏈接/id
• api/任務(wù)/id

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

可能的請求和響應(yīng)的列表是：

請求參數(shù)

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

任務(wù)：

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

關(guān)聯(lián)：

• 來源 ：1
• 目標(biāo) ：2
• 類型 ：0

筆記：

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

REST-JSON 模式

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

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

在REST模式中，數(shù)據(jù)以以下形式發(fā)送到服務(wù)器：

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

而在REST-JSON模式下，數(shù)據(jù)以JSON格式發(fā)送：

Content-type: application/json

因此參數(shù)作為JSON對象發(fā)送，請求有效載荷

• 任務(wù)

{
    "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"}
    }]
}

• 關(guān)聯(lián)

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

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

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

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

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