這篇文章給大家講解如何利用dhtmlxGantt在服務(wù)器端集成數(shù)據(jù)。

DhtmlxGantt正版試用下載

存儲(chǔ)任務(wù)順序

甘特圖顯示任務(wù)的順序與它們來自數(shù)據(jù)源的順序相同。如果您允許用戶手動(dòng)重新排序任務(wù)，您還需要將此訂單存儲(chǔ)在數(shù)據(jù)庫中，并確保您的數(shù)據(jù)饋送返回正確排序的數(shù)據(jù)。

客戶端配置：

// reordering tasks within the whole gantt
gantt.config.order_branch = true;
gantt.config.order_branch_free = true;
 
gantt.init("gantt_here");
gantt.load("/api");
 
var dp = gantt.createDataProcessor({
      url: "/api",
      mode: "REST"
});

保存順序可以通過多種方式實(shí)現(xiàn)，我們將展示其中一種。

• 您在任務(wù)表中添加了一個(gè)數(shù)字列，我們稱其為“排序順序”。
• 在執(zhí)行 GET 操作時(shí)，您按此列按升序?qū)θ蝿?wù)進(jìn)行排序。
• 添加新任務(wù)時(shí)，它應(yīng)該收到 MAX(sortorder) + 1排序。
• 當(dāng)客戶端更改訂單時(shí)，甘特圖將發(fā)送 PUT（如果您不使用 REST 模式，則為 POST） 任務(wù)的所有屬性以及描述任務(wù)在項(xiàng)目樹中位置的值。

參數(shù)將 target 包含在當(dāng)前任務(wù)之前或之后的最近任務(wù)的 id。它的價(jià)值可能來自以下兩種格式之一：

• target=targetId-當(dāng)前任務(wù)應(yīng)該在targetId任務(wù)之前
• target=next:targetId-當(dāng)前任務(wù)應(yīng)該緊跟在targetId任務(wù)之后

應(yīng)用訂單更改通常涉及更新多個(gè)任務(wù)，這里是一個(gè)偽代碼示例，說明如何實(shí)現(xiàn)它：

const target = request["target"];
const currentTaskId = request["id"];
let nextTask;
let targetTaskId;
 
// get id of adjacent task and check whether updated task should go before or after it
if(target.startsWith("next:")){
    targetTaskId = target.substr("next:".length);
    nextTask = true;
}else{
    targetTaskId = target;
    nextTask = false;
}
 
const currentTask = tasks.getById(currentTaskId);
const targetTask = tasks.getById(targetTaskId);
 
if(!targetTaskId)
    return;
 
// updated task will receive the sortorder value of the adjacent task
let targetOrder = targetTask.sortorder;
 
// if it should go after the adjacent task, it should receive a bigger sortorder
if(nextTask)
    targetOrder++;
 
// increase sort orders of tasks that should go after the updated task
tasks.where(task => task.sortorder >= targetOrder).
   update(task => task.sortorder++);
 
// and update the task with its new sortorder
currentTask.sortorder = targetOrder;
 
tasks.save(currentTask);

自定義請求標(biāo)頭和參數(shù)

請求添加自定義標(biāo)頭

當(dāng)您需要甘特圖向后端發(fā)送額外的標(biāo)頭時(shí)，您可以使用dataProcessor.setTransactionMode方法指定它們。

例如，假設(shè)您需要在請求中添加授權(quán)令牌：

gantt.init("gantt_here");
gantt.load("/api");
 
var dp = gantt.createDataProcessor({
  url: "/api",
  mode:"REST",
  headers: {
    "Content-Type": "application/x-www-form-urlencoded",
    "Authorization": "Token 9944b09199c62bcf9418ad846dd0e4bbdfc6ee4b"
  }
});

目前，load不支持header/payload參數(shù)，因此如果您需要它們來進(jìn)行GET請求，您必須手動(dòng)發(fā)送xhr并使用parse將數(shù)據(jù)加載到甘特圖中，例如：

gantt.ajax.get({
    url: "/api",
    headers: {
        "Authorization": "Token 9944b09199c62bcf9418ad846dd0e4bbdfc6ee4b"
    }
}).then(function (xhr) {
    gantt.parse(xhr.responseText)
});

請求添加自定義參數(shù)

有幾種方法可以向請求發(fā)送附加參數(shù)。

如您所知，甘特圖將數(shù)據(jù)對(duì)象的所有屬性發(fā)送回后端。因此，您可以直接向數(shù)據(jù)對(duì)象添加一個(gè)附加屬性，并將其發(fā)送到后端：

gantt.attachEvent("onTaskCreated", function(task){
    task.userId = currentUser;
    return true;
});

或者，您可以使用參數(shù)的有效負(fù)載 屬性setTransactionMode向數(shù)據(jù)處理器發(fā)送的所有請求添加自定義參數(shù)：

gantt.init("gantt_here");
gantt.load("/api");
 
var dp = gantt.createDataProcessor({
  url: "/api",
  mode:"REST",
  payload: {
    token: "9944b09199c62bcf9418ad846dd0e4bbdfc6ee4b"
  }
});

將自定義參數(shù)添加到請求的另一種方法是使用DataProcessor的onBeforeUpdate事件：

var dp = gantt.createDataProcessor({
  url: "/api",
  mode:"REST"
});
 
dp.attachEvent("onBeforeUpdate", function(id, state, data){
    data.projectId = "1";
    return true;
});

要?jiǎng)討B(tài)更改后端URL，請使用dataProcessor.url方法：

dp.url("/url");

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

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

更多正版甘特圖軟件下載、購買、授權(quán)咨詢，請點(diǎn)這里！