篇文章給大家講解 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 歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！