项目管理工具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） 任务的所有属性以及描述任务在项目树中位置的值。

HTTP方法	URL	参数	响应
PUT	/apiUrl/task/taskId	目标 = 相邻任务 ID	{“行动”：“更新”}

参数将 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相关内容，请锁定本套系列教程。