DHTMLX Gantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的大部分开发需求，具备完善的甘特图图表库，功能强大，价格便宜，提供丰富而灵活的JavaScript API接口，与各种服务器端技术（PHP，ASP.NET，Java等）简单集成，满足多种定制开发需求。
DHTMLX JavaScript UI 库所开发的 JavaScript 组件易于使用且功能丰富，非常适合任何领域和任何复杂性的解决方案，能够节省创建和维护业务应用程序的时间，提高生产力。
DHTMLX Gantt 最新下载（qun：764148812）
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享有超十年声誉，支持跨浏览器和跨平台，性价比高，可满足项目管理控件应用的所有需求，是较为完善的甘特图图表库
