這篇文章給大家講解如何利用dhtmlxGantt從對(duì)象和服務(wù)器加載數(shù)據(jù)。

DhtmlxGantt正版試用下載

從對(duì)象加載

要從對(duì)象加載數(shù)據(jù)，請(qǐng)使用parse方法：從內(nèi)聯(lián)數(shù)據(jù)源加載

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);

從服務(wù)器加載

客戶(hù)端

要從服務(wù)器加載數(shù)據(jù)，請(qǐng)使用load方法：甘特圖.html

gantt.init("gantt_here");
gantt.load("data.json");

load方法將向指定的 url 發(fā)送一個(gè) AJAX 請(qǐng)求，并期望以一種受支持的格式響應(yīng)數(shù)據(jù)。例如：數(shù)據(jù).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"}
  ]
}

格式在方法的第二個(gè)參數(shù)中指定：“json”、“xml”或“oldxml”。

gantt.load("data.xml", "xml");

服務(wù)器端

在服務(wù)器上，您可以擁有一個(gè)包含數(shù)據(jù)的靜態(tài)文件，也可以擁有一個(gè)從數(shù)據(jù)源收集數(shù)據(jù)并將其寫(xiě)入響應(yīng)的腳本。服務(wù)器端實(shí)現(xiàn)取決于您要使用的框架。

例如，在 Node.js 的情況下，我們應(yīng)該為 URL 添加一個(gè)服務(wù)器路由，甘特圖將在其中發(fā)送 AJAX 數(shù)據(jù)請(qǐng)求。

gantt.load("/data");

它將生成 JSON 格式的相應(yīng)響應(yīng)。

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是用于跨瀏覽器和跨平臺(tái)應(yīng)用程序的功能齊全的Gantt圖表，可滿(mǎn)足項(xiàng)目管理控件應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫(kù)。了解更多DhtmlxGantt相關(guān)內(nèi)容和資訊，歡迎在線咨詢(xún)或者私信我獲取正版試用版及報(bào)價(jià)。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

更多正版甘特圖軟件下載、購(gòu)買(mǎi)、授權(quán)咨詢(xún)，請(qǐng)點(diǎn)這里！