项目管理工具dhtmlxGantt甘特图入门教程（八）：数据加载（一）

青旅半醒 2023-09-23 21:53 123阅读 0赞

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理控件应用程序的所有需求，是最完善的甘特图图表库。

这篇文章给大家讲解如何利用dhtmlxGantt从对象和服务器加载数据。

从对象加载

要从对象加载数据，请使用parse方法：从内联数据源加载

>     var data = {
>       tasks:[
>          {id:1, text:"Project #1", start_date:"01-04-2020", duration:18},
>          {id:2, text:"Task #1", start_date:"02-04-2020", duration:8, parent:1},
>          {id:3, text:"Task #2", start_date:"11-04-2020", duration:8, parent:1}
>        ]
>     };
>     gantt.init("gantt_here");
>     gantt.parse(data);

从服务器加载

客户端

要从服务器加载数据，请使用load方法：甘特图.html

>     gantt.init("gantt_here");
>     gantt.load("data.json");

load方法将向指定的 url 发送一个 AJAX 请求，并期望以一种受支持的格式响应数据。例如：数据.json

>     {
>       "tasks":[
>          {"id":1, "text":"Project #1", "start_date":"01-04-2020", "duration":18},
>          {"id":2, "text":"Task #1", "start_date":"02-04-2020","duration":8, "parent":1},
>          {"id":3, "text":"Task #2", "start_date":"11-04-2020","duration":8, "parent":1}
>       ],
>       "links":[
>          {"id":1, "source":1, "target":2, "type":"1"},
>          {"id":2, "source":2, "target":3, "type":"0"}
>       ]
>     }

格式在方法的第二个参数中指定：“json”、“xml”或“oldxml”。

>     gantt.load("data.xml", "xml");

服务器端

在服务器上，您可以拥有一个包含数据的静态文件，也可以拥有一个从数据源收集数据并将其写入响应的脚本。服务器端实现取决于您要使用的框架。

例如，在 Node.js 的情况下，我们应该为 URL 添加一个服务器路由，甘特图将在其中发送 AJAX 数据请求。

>     gantt.load("/data");

它将生成 JSON 格式的相应响应。

>     app.get("/data", function(req, res){
>         db.query("SELECT * FROM gantt_tasks", function(err, rows){
>             if (err) console.log(err);
>             db.query("SELECT * FROM gantt_links", function(err, links){
>                 if (err) console.log(err);
>                 for (var i = 0; i < rows.length; i++){
>                     rows[i].start_date = rows[i].start_date.format("YYYY-MM-DD");
>                     rows[i].open = true;
>                 }
>      
>                 res.send({ tasks:rows, links : links });
>             });
>         });
>     });

了解更多DhtmlxGantt相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及报价。