这篇文章给大家讲解如何利用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相关内容和资讯,欢迎访问慧都网进行咨询,或者私信我获取正版试用版及报价。
甘特图控件交流群:764148812 欢迎进群交流讨论
更多正版甘特图软件下载、购买、授权咨询,请点这里!