甘特图控件DHTMLX Gantt入门使用教程【引入】：用Node.js实现Gantt（下）

我不是女神ヾ 2023-09-27 22:37 88阅读 0赞

DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求，具备完善的甘特图图表库，功能强大，价格便宜，提供丰富而灵活的JavaScript API接口，与各种服务器端技术（PHP，ASP.NET，Java等）简单集成，满足多种定制开发需求。

DHTMLX JavaScript UI 库所开发的 JavaScript 组件易于使用且功能丰富，非常适合任何领域和任何复杂性的解决方案，能够节省创建和维护业务应用程序的时间，提高生产力。

[DHTMLX Gantt 最新下载（qun：764148812）![icon-default.png?t=N3I4][icon-default.png_t_N3I4]https://www.evget.com/product/4213/download][DHTMLX Gantt _qun_764148812_icon-default.png_t_N3I4_icon-default.png_t_N3I4_https_www.evget.com_product_4213_download]

**存储任务的顺序**

客户端甘特图允许使用拖放对任务进行重新排序。因此，如果您使用此功能，则必须将此订单存储在数据库中。 您可以在此处查看常见说明。

现在让我们将此功能添加到我们的应用程序中。

**在客户端上启用任务重新排序**  
首先，我们需要允许用户在 UI 中更改任务顺序。打开“索引”视图并更新甘特图的配置：

>     gantt.config.order_branch = true;
>     gantt.config.order_branch_free = true;
>     
>     gantt.init("gantt_here");

现在，让我们在后端反映这些更改。我们将订单存储在名为“sortorder”的列中， 更新后的gantt\_tasks表声明可能如下所示：

>     CREATE TABLE `gantt_tasks` (
>     `id` int(11) NOT NULL AUTO_INCREMENT PRIMARY KEY,
>     `text` varchar(255) COLLATE utf8_unicode_ci NOT NULL,
>     `start_date` datetime NOT NULL,
>     `duration` int(11) NOT NULL,
>     `progress` float NOT NULL DEFAULT 0,
>     `parent` int(11) NOT NULL,
>     `sortorder` int(11) NOT NULL
>     ) ENGINE=InnoDB DEFAULT CHARSET=utf8 COLLATE=utf8_unicode_ci;

或者将列添加到已有的表中：

>     ALTER TABLE `gantt_tasks` ADD COLUMN `sortorder` int(11) NOT NULL;

之后，我们需要更新服务器.js文件：

**1 、GET /data 必须返回按列排序的任务：sortorder**

>     app.get("/data", (req, res) => {
>     Promise.all([
>     db.query("SELECT * FROM gantt_tasks ORDER BY sortorder ASC"),
>     db.query("SELECT * FROM gantt_links")
>     ]).then(results => {
>     let tasks = results[0],
>     links = results[1];
>     
>     for (let i = 0; i < tasks.length; i++) {
>     tasks[i].start_date = tasks[i].start_date.format("YYYY-MM-DD hh:mm:ss");
>     tasks[i].open = true;
>     }
>     
>     res.send({
>     data: tasks,
>     collections: { links: links }
>     });
>     
>     }).catch(error => {
>     sendResponse(res, "error", null, error);
>     });
>     });

**2 、新添加的任务必须接收初始值：sortorder**

>     app.post("/data/task", (req, res) => { // adds new task to database
>     let task = getTask(req.body);
>     
>     db.query("SELECT MAX(sortorder) AS maxOrder FROM gantt_tasks")
>     .then(result => {
>     // assign max sort order to new task
>     let orderIndex = (result[0].maxOrder || 0) + 1;
>     return db.query("INSERT INTO gantt_tasks(text, start_date, duration,"
>     + "progress, parent, sortorder) VALUES (?,?,?,?,?,?)",
>     [task.text, task.start_date, task.duration, task.progress, task.parent,
>     orderIndex]);
>     })
>     .then(result => {
>     sendResponse(res, "inserted", result.insertId);
>     })
>     .catch(error => {
>     sendResponse(res, "error", null, error);
>     });
>     });

**3 、最后，当用户对任务重新排序时，必须更新任务订单：**

>     // update task
>     app.put("/data/task/:id", (req, res) => {
>     let sid = req.params.id,
>     target = req.body.target,
>     task = getTask(req.body);
>     
>     Promise.all([
>     db.query("UPDATE gantt_tasks SET text = ?, start_date = ?,"
>     + "duration = ?, progress = ?, parent = ? WHERE id = ?",
>     [task.text, task.start_date, task.duration, task.progress,
>     task.parent, sid]),
>     updateOrder(sid, target)
>     ])
>     .then(result => {
>     sendResponse(res, "updated");
>     })
>     .catch(error => {
>     sendResponse(res, "error", null, error);
>     });
>     });
>     
>     function updateOrder(taskId, target) {
>     let nextTask = false;
>     let targetOrder;
>     
>     target = target || "";
>     
>     if (target.startsWith("next:")) {
>     target = target.substr("next:".length);
>     nextTask = true;
>     }
>     
>     return db.query("SELECT * FROM gantt_tasks WHERE id = ?", [target])
>     .then(result => {
>     if (!result[0])
>     return Promise.resolve();
>     
>     targetOrder = result[0].sortorder;
>     if (nextTask)
>     targetOrder++;
>     
>     return db.query("UPDATE gantt_tasks SET sortorder"+
>     " = sortorder + 1 WHERE sortorder >= ?", [targetOrder])
>     .then(result => {
>     return db.query("UPDATE gantt_tasks SET sortorder = ? WHERE id = ?",
>     [targetOrder, taskId]);
>     });
>     });
>     }

您可以在 GitHub 上查看现成的演示。

**应用程序安全性**

甘特图不提供任何方法来防止应用程序受到各种威胁，例如SQL注入或XSS和CSRF攻击。重要的是，确保应用程序安全的责任在于实现后端的开发人员。阅读相应文章中的详细信息。

**故障排除**

如果您已完成上述步骤以实现甘特图与 Node.js 的集成，但甘特图未在页面上呈现任务和链接，请查看排查后端集成问题一文。它描述了 找出问题根源的方法。

现在你有一个功能齐全的甘特图。您可以在 GitHub 上查看完整代码，克隆或下载它并将其用于您的项目。

DHTMLX Gantt享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足**项目管理控件**应用的所有需求，是较为完善的甘特图图表库

[icon-default.png_t_N3I4]: https://csdnimg.cn/release/blog_editor_html/release2.2.5/ckeditor/plugins/CsdnLink/icons/icon-default.png?t=N3I4
[DHTMLX Gantt _qun_764148812_icon-default.png_t_N3I4_icon-default.png_t_N3I4_https_www.evget.com_product_4213_download]: https://www.evget.com/product/4213/download