项目管理工具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相关内容和资讯，欢迎在线咨询或者私信我获取正版试用版及 价。

甘特图控件交流群：764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：