DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的大部分開發需求，具備完善的甘特圖圖表庫，功能強大，價格便宜，提供豐富而靈活的JavaScript API接口，與各種服務器端技術（PHP，ASP.NET，Java等）簡單集成，滿足多種定制開發需求。

DHTMLX JavaScript UI 庫所開發的 JavaScript 組件易于使用且功能豐富，非常適合任何領域和任何復雜性的解決方案，能夠節省創建和維護業務應用程序的時間，提高生產力。

DHTMLX Gantt 最新下載

甘特圖控件交流群：764148812

存儲任務的順序

客戶端甘特圖允許使用拖放對任務進行重新排序。因此，如果您使用此功能，則必須將此訂單存儲在數據庫中。 您可以在此處查看常見說明。

現在讓我們將此功能添加到我們的應用程序中。

在客戶端上啟用任務重新排序
首先，我們需要允許用戶在 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享有超十年聲譽，支持跨瀏覽器和跨平臺，性價比高，可滿足項目管理控件應用的所有需求，是較為完善的甘特圖圖表庫

甘特圖控件交流群：764148812

歡迎進群交流討論，獲取更多幫助請聯系