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

╰+攻爆jí腚メ 2023-09-24 19:14 125阅读 0赞

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

[dhtmlxGantt][]是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足应用程序的所有需求，是完善的甘特图图表库

**[DhtmlxGantt正版试用下载（qun 764149912）![icon-default.png?t=N176][icon-default.png_t_N176]https://www.evget.com/product/4213/download][dhtmlxGantt]**

**脚本数据保存**

如果您已初始化dataProcessor，则用户或以编程方式所做的任何更改都将自动保存在数据源中。通常，要以编程方式更新特定任务或依赖项，请分别使用updateTask和updateLink方法：

>     gantt.parse([
>        {id:1, start_date:"2019-05-13 6:00", end_date:"2019-05-13 8:00", text:"Event 1"},
>        {id:2, start_date:"2019-06-09 6:00", end_date:"2019-06-09 8:00", text:"Event 2"}
>     ],"json");
>      
>     gantt.getTask(1).text = "Task 111"; //changes task's data
>     gantt.updateTask(1); // renders the updated task

自定义路由器

如果后端不需要RESTful AJAX API，或者如果您想手动控制发送到服务器的内容，您可以使用自定义路由。

例如，如果您使用Angular、React或任何其他框架，其中页面上的组件不会将更改直接发送到服务器，而是将它们传递给负责数据保存的不同组件。

要为DataProcessor提供自定义路由选项，您应该使用createDataProcessor()方法：

>     gantt.createDataProcessor(function(entity, action, data, id){
>         const services = {
>             "task": this.taskService,
>             "link": this.linkService
>         };
>         const service = services[entity];
>      
>         switch (action) {
>             case "update":
>                 return service.update(data);
>             case "create":
>                 return service.insert(data);
>             case "delete":
>                 return service.remove(id);
>         }
>     });

**使用AJAX设置自定义路由器**

Gantt AJAX模块可用于设置自定义路由。Gantt期望自定义路由器作为操作的结果返回一个Promise对象，这允许捕获操作的结束。AJAX模块支持Promise，适合在自定义路由器内部使用。甘特图会得到Promise并处理Promise的内容，当它被解决时。

在下面的示例中，创建了一个新任务。如果服务器响应包含新创建任务的id，甘特图将能够应用它。

>     gantt.createDataProcessor(function(entity, action, data, id){
>     ...
>      
>       switch (action) {
>         case "create":
>           return gantt.ajax.post({
>             headers: { 
>               "Content-Type": "application/json" 
>             },
>             url: server + "/task",
>             data: JSON.stringify(data)
>           });
>         break;
>       }
>     });

错误处理

服务器可以通过返回"action":"error"响应来通知Gantt操作失败：

>     {"action":"error"}

可以在gantt.dataProcessor的帮助下在客户端捕获这样的响应：

>     var dp = gantt.createDataProcessor({
>       url: "/api",
>       mode:"REST"
>     });
>     dp.attachEvent("onAfterUpdate", function(id, action, tid, response){
>         if(action == "error"){
>             // do something here
>         }
>     });

响应对象可能包含任意数量的附加属性，它们可以通过responseonAfterUpdate处理程序的参数。

如果服务器响应您的某些操作错误但更改已保存在客户端上，则同步其状态的最佳方法是清除客户端的状态，并从服务器端重新加载正确的数据：

>     dp.attachEvent("onAfterUpdate", function(id, action, tid, response){
>         if(action == "error"){
>             gantt.clearAll();
>             gantt.load("url1");
>         }
>     });

如果您想同步客户端-服务器端但不想进行任何服务器调用，您可以使用silent()方法，该方法使其中的所有代码不会触发内部事件或服务器调用：

>     gantt.silent(function(){
>         gantt.deleteTask(item.id);
>     });
>      
>     gantt.render();

了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我或加入我们

[dhtmlxGantt]: https://www.evget.com/product/4213/download
[icon-default.png_t_N176]: https://csdnimg.cn/release/blog_editor_html/release2.2.3/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N176