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

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

点击获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是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容，请锁定本套系列教程。