项目管理工具dhtmlxGantt甘特图入门教程（十）：服务器端数据集成（上）

这篇文章给大家讲解如何利用dhtmlxGantt在服务器端集成数据。

客户端

1)调用load方法，其中作为参数指定以JSON格式返回甘特图数据的URL。

2)使用以下两种方式之一创建DataProcessor实例：

• 初始化DataProcessor并将其附加到dhtmlxGantt对象：

gantt.init("gantt_here");gantt.load("apiUrl");// keep the order of the lines belowvar 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

关联：

• 目标 ：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    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：