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

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