篇文章给大家讲解 dhtmlxGantt可以加载或支持哪些数据格式。

点击获DhtmlxGantt官方正式版

带有集合的JSON

JSON 数据可以在数据对象的“集合”属性中包含任意数量的附加数组。代码如下所示：

{
    "tasks":[
        {"id":"1", "text":"Project #2", "start_date":"01-04-2020", "duration":18,
            "progress":0.4, "open": true},
        {"id":"2", "text":"Task #1", "start_date":"02-04-2020", "duration":8,
            "progress":0.6, "parent":"1"},
        {"id":"3", "text":"Task #2", "start_date":"11-04-2020", "duration":8,
            "progress":0.6, "parent":"1"}
    ],
    "links":[
        {"id":"1", "source":"1", "target":"2", "type":"1"},
        {"id":"2", "source":"2", "target":"3", "type":"0"},
        {"id":"3", "source":"3", "target":"4", "type":"0"},
        {"id":"4", "source":"2", "target":"5", "type":"2"}
    ],
    "collections": { 
        "sections":[                            
            {"value":"1","label":"Simple"},     
            {"value":"2","label":"Complex"},    
            {"value":"3","label":"Unknown"}     
        ]                                       
    }                                           
}

XML(dhtmlxGantt < 2.0)

代码如下所示：

<?xml version="1.0" encoding="UTF-8"?>
<projects>
  <project id="1" name="project1" startdate="2006,12,14">
     <task id="1">
    <name>project1 task1</name>
    <est>2006,12,14</est>
    <duration>120</duration>
        <percentcompleted>60</percentcompleted>
    <predecessortasks></predecessortasks>
            <childtasks>
                  <task id="2">
                    <name>project1 task2</name>
                    <est>2006,12,14</est>
                <duration>100</duration>
                    <percentcompleted>20</percentcompleted>
                <predecessortasks></predecessortasks>
                    <childtasks></childtasks>
              </task>
                  <task id="6">
                    <name>project1 task6</name>
                <est>2006,12,15</est>
                    <duration>90</duration>
                <percentcompleted>10</percentcompleted>
                <predecessortasks>2</predecessortasks>
                    <childtasks></childtasks>
                  </task>
            </childtasks>
     </task>
  </project>
  <project id="2" name="project2" startdate="2006,12,20">
     <task id="12">
    <name>project2 task12</name>
    <est>2006,12,20</est>
    <duration>140</duration>
    <percentcompleted>60</percentcompleted>
    <predecessortasks></predecessortasks>
        <childtasks>
            <task id="14">
            <name>project2 task14</name>
            <est>2006,12,20</est>
            <duration>100</duration>
            <percentcompleted>20</percentcompleted>
            <predecessortasks></predecessortasks>
                <childtasks></childtasks>
            </task>
        </childtasks>
     </task>
  </project>
</projects>

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表，可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯，欢迎访问慧都网获取。

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

篇文章给大家讲解如何利用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 欢迎进群交流讨论

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