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

DhtmlxGantt正版試用下載

存儲任務順序

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

客戶端配置：

// 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"
});

保存順序可以通過多種方式實現，我們將展示其中一種。

• 您在任務表中添加了一個數字列，我們稱其為“排序順序”。
• 在執行 GET 操作時，您按此列按升序對任務進行排序。
• 添加新任務時，它應該收到 MAX(sortorder) + 1排序。
• 當客戶端更改訂單時，甘特圖將發送 PUT（如果您不使用 REST 模式，則為 POST） 任務的所有屬性以及描述任務在項目樹中位置的值。

參數將 target 包含在當前任務之前或之后的最近任務的 id。它的價值可能來自以下兩種格式之一：

• target=targetId-當前任務應該在targetId任務之前
• target=next:targetId-當前任務應該緊跟在targetId任務之后

應用訂單更改通常涉及更新多個任務，這里是一個偽代碼示例，說明如何實現它：

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

自定義請求標頭和參數

請求添加自定義標頭

當您需要甘特圖向后端發送額外的標頭時，您可以使用dataProcessor.setTransactionMode方法指定它們。

例如，假設您需要在請求中添加授權令牌：

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參數，因此如果您需要它們來進行GET請求，您必須手動發送xhr并使用parse將數據加載到甘特圖中，例如：

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

請求添加自定義參數

有幾種方法可以向請求發送附加參數。

如您所知，甘特圖將數據對象的所有屬性發送回后端。因此，您可以直接向數據對象添加一個附加屬性，并將其發送到后端：

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

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

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

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

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

要動態更改后端URL，請使用dataProcessor.url方法：

dp.url("/url");

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

甘特圖控件交流群：764148812    歡迎進群交流討論

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