这篇文章给大家讲解如何利用dhtmlxGantt在服务器端集成数据。
dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足应用程序的所有需求，是完善的甘特图图表库
DhtmlxGantt正版试用下载（qun：764148812）
https://www.evget.com/product/4213/download
客户端
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"
}
这种格式使得在任何服务器端平台上处理复杂记录变得更加方便。
