项目管理工具dhtmlxGantt甘特图入门教程（十）：服务器端数据集成（中）

这篇文章给大家讲解如何利用dhtmlxGantt在服务器端集成数据。

存储任务顺序

甘特图显示任务的顺序与它们来自数据源的顺序相同。如果您允许用户手动重新排序任务，您还需要将此订单存储在数据库中，并确保您的数据馈送返回正确排序的数据。

客户端配置：

// reordering tasks within the whole ganttgantt.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 itif(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 tasklet targetOrder = targetTask.sortorder;// if it should go after the adjacent task, it should receive a bigger sortorderif(nextTask)    targetOrder++;// increase sort orders of tasks that should go after the updated tasktasks.where(task => task.sortorder >= targetOrder).   update(task => task.sortorder++);// and update the task with its new sortordercurrentTask.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    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询，请点这里！

标签：

来源：慧都