项目管理工具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。

可能的请求和响应的列表是：

ACTION	HTTP	URL	RESPONSE
加载数据	GET	/apiUrl	JSON格式
添加新任务	POST	/apiUrl/任务	{"action":"inserted","tid":"taskId"}
更新任务	PUT	/apiUrl/task/taskId	{“行动”：“更新”}
删除任务	DELETE	/apiUrl/task/taskId	{“行动”：“删除”}
添加新链接	POST	/apiUrl/链接	{"action":"inserted","tid":"linkId"}
更新链接	PUT	/apiUrl/link/linkId	{“行动”：“更新”}
删除链接	DELETE	/apiUrl/link/linkId	{“行动”：“删除”}

请求参数

创建/更新/删除请求将包含客户端任务或链接对象的所有公共属性：

任务：

• 开始日期 ：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相关内容，请锁定本套系列教程。