DHTMLX Gantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表。可滿足項目管理應(yīng)用程序的所有需求，是最完善的甘特圖圖表庫。
在現(xiàn)代Web應(yīng)用程序中，在頁面重新加載之間保持UI元素的狀態(tài)對于流暢的用戶體驗至關(guān)重要。
在本教程中我們將知道您完成DHTMLX Gantt中持久UI的簡單實現(xiàn)，重點關(guān)注一小部分特性——即任務(wù)的展開或折疊分支，以及選定的甘特圖縮放級別。您將了解如何將這些設(shè)置存儲在瀏覽器的本地存儲中并在以后恢復(fù)，以便在重新加載頁面后甘特圖保持一致。通過本教程的學(xué)習(xí)，您可以讓應(yīng)用程序的最終用戶繼續(xù)保持他們離開的狀態(tài)，不需要重新配置設(shè)置，從而節(jié)省時間并提高效率。
為什么在甘特圖中需要持久的UI狀態(tài)？
在深入研究代碼之前，讓我們更詳細(xì)地考慮一下本教程的目標(biāo)。
在下面的示例中，您可以將整個項目折疊成一個緊湊視圖，將其展開并使用簡單的工具在甘特圖的縮放級別之間切換。但是一旦重新加載頁面，所有更改將丟失。因為動態(tài)UI更改很少保存到數(shù)據(jù)庫中，但是在實踐中這對最終用戶非常不方便。
為了進(jìn)行比較，您還可以測試下面的第二個示例，其中實現(xiàn)了持久狀態(tài)。
嘗試切換縮放級別或展開、折疊甘特圖中的某些分支，然后重新加載頁面。您將看到重新加載之前引入的所有更改甘特圖，可以為更好的甘特圖用戶體驗做出貢獻(xiàn)。
現(xiàn)在是時候向您展示如何逐步將持久UI狀態(tài)集成到JavaScript甘特圖中了。
Step 1：設(shè)置甘特圖
對于本教程，創(chuàng)建一個簡單的甘特圖并添加一個工具欄就足夠了，以便快速操作，如縮放和擴展分支。
您需要創(chuàng)建HTML布局。
<!DOCTYPE html>
<head>
<meta http-equiv="Content-type" content="text/html; charset=utf-8">
<title>Persistent UI State in DHTMLX Gantt</title>
<script src="http://cdn.dhtmlx.com/gantt/edge/dhtmlxgantt.js"></script>
<link rel="stylesheet" >
<style>
html,
body {
height: 100%;
padding: 0px;
margin: 0px;
overflow: hidden;
}
body {
display: flex;
flex-direction: column;
}
#toolbar {
display: flex;
padding: 12px;
gap: 12px;
justify-content: center;
flex-shrink: 0;
}
#gantt_here {
flex-basis: 100%;
}
</style>
</head>
<body>
<div id="toolbar">
<button id="expandAll">Expand All</button>
<button id="collapseAll">Collapse All</button>
<label>
Zoom: <input type="range" id="zoomSlider" min="0" max="5" step="1" value="1">
</label>
</div>
<div id="gantt_here" style='width:100%; height:100%;'></div>
<script>
</script>
</body>
在這里您為甘特圖創(chuàng)建了一個容器，并在其上放置了一個工具欄。工具欄包含展開和折疊所有任務(wù)的按鈕，以及調(diào)整縮放級別的滑塊。
這些控件將在下一步中描述的甘特圖初始化之后立即啟用。
配置并初始化甘特圖
在這個階段，您將使用Zoom擴展創(chuàng)建一個基本的甘特圖配置。不要被代碼的數(shù)量嚇倒，其中大部分是樣板時間刻度配置和測試數(shù)據(jù)。
gantt.config.open_tree_initially = true;
gantt.ext.zoom.init({
levels: [
{
name: "hour",
scale_height: 50,
min_column_width: 30,
scales: [
{ unit: "day", step: 1, format: "%d %M" },
{ unit: "hour", step: 1, format: "%H" }
]
},
{
name: "day",
scale_height: 50,
min_column_width: 80,
scales: [
{ unit: "month", format: "%F, %Y" },
{ unit: "day", step: 1, format: "%d %M" }
]
},
{
name: "week",
scale_height: 50,
min_column_width: 50,
scales: [
{ unit: "month", format: "%F, %Y" },
{
unit: "week", step: 1, format: function (date) {
const dateToStr = gantt.date.date_to_str("%d %M");
const endDate = gantt.date.add(date, 6, "day");
const weekNum = gantt.date.date_to_str("%W")(date);
return "#" + weekNum + ", " + dateToStr(date) + " - " + dateToStr(endDate);
}
},
{ unit: "day", step: 1, format: "%j %D" }
]
},
{
name: "month",
scale_height: 50,
min_column_width: 120,
scales: [
{ unit: "month", format: "%F, %Y" },
{ unit: "week", format: "Week #%W" }
]
},
{
name: "quarter",
height: 50,
min_column_width: 90,
scales: [
{ unit: "month", step: 1, format: "%M" },
{
unit: "quarter", step: 1, format: function (date) {
const dateToStr = gantt.date.date_to_str("%M");
const endDate = gantt.date.add(gantt.date.add(date, 3, "month"), -1, "day");
return dateToStr(date) + " - " + dateToStr(endDate);
}
}
]
},
{
name: "year",
scale_height: 50,
min_column_width: 30,
scales: [
{ unit: "year", step: 1, format: "%Y" }
]
}
]
});
gantt.ext.zoom.setLevel(1);
gantt.init("gantt_here");
gantt.parse({
data: [
{ id: 1, text: "Office itinerancy", type: "project", start_date: "02-04-2024 00:00", duration: 17, progress: 0.4, parent: 0 },
{ id: 2, text: "Office facing", type: "project", start_date: "02-04-2024 00:00", duration: 8, progress: 0.6, parent: "1" },
{ id: 3, text: "Furniture installation", type: "project", start_date: "11-04-2024 00:00", duration: 8, parent: "1", progress: 0.6, },
{ id: 4, text: "The employee relocation", type: "project", start_date: "13-04-2024 00:00", duration: 5, parent: "1", progress: 0.5 },
{ id: 5, text: "Interior office", type: "task", start_date: "03-04-2024 00:00", duration: 7, parent: "2", progress: 0.6 },
{ id: 6, text: "Air conditioners check", type: "task", start_date: "03-04-2024 00:00", duration: 7, parent: "2", progress: 0.6 },
{ id: 7, text: "Workplaces preparation", type: "task", start_date: "12-04-2024 00:00", duration: 8, parent: "3", progress: 0.6, },
{ id: 8, text: "Preparing workplaces", type: "task", start_date: "14-04-2024 00:00", duration: 5, parent: "4", progress: 0.5 },
{ id: 9, text: "Workplaces importation", type: "task", start_date: "21-04-2024 00:00", duration: 4, parent: "4", progress: 0.5 },
{ id: 10, text: "Workplaces exportation", type: "task", start_date: "27-04-2024 00:00", duration: 3, parent: "4", progress: 0.5 },
{ id: 11, text: "Product launch", type: "project", progress: 0.6, start_date: "02-04-2024 00:00", duration: 13, parent: 0 },
{ id: 12, text: "Perform Initial testing", type: "task", start_date: "03-04-2024 00:00", duration: 5, parent: "11", progress: 1 },
{ id: 13, text: "Development", type: "project", start_date: "03-04-2024 00:00", duration: 11, parent: "11", progress: 0.5 },
{ id: 14, text: "Analysis", type: "task", start_date: "03-04-2024 00:00", duration: 6, parent: "11", owner: [], progress: 0.8 },
{ id: 15, text: "Design", type: "project", start_date: "03-04-2024 00:00", duration: 5, parent: "11", progress: 0.2 },
{ id: 16, text: "Documentation creation", type: "task", start_date: "03-04-2024 00:00", duration: 7, parent: "11", progress: 0 },
{ id: 17, text: "Develop System", type: "task", start_date: "03-04-2024 00:00", duration: 2, parent: "13", progress: 1 },
{ id: 25, text: "Beta Release", type: "milestone", start_date: "06-04-2024 00:00", parent: "13", progress: 0, duration: 0 },
{ id: 18, text: "Integrate System", type: "task", start_date: "10-04-2024 00:00", duration: 2, parent: "13", progress: 0.8 },
{ id: 19, text: "Test", type: "task", start_date: "13-04-2024 00:00", duration: 4, parent: "13", progress: 0.2 },
{ id: 20, text: "Marketing", type: "task", start_date: "13-04-2024 00:00", duration: 4, parent: "13", progress: 0 },
{ id: 21, text: "Design database", type: "task", start_date: "03-04-2024 00:00", duration: 4, parent: "15", progress: 0.5 },
{ id: 22, text: "Software design", type: "task", start_date: "03-04-2024 00:00", duration: 4, parent: "15", progress: 0.1 },
{ id: 23, text: "Interface setup", type: "task", start_date: "03-04-2024 00:00", duration: 5, parent: "15", progress: 0 },
{ id: 24, text: "Release v1.0", type: "milestone", start_date: "20-04-2024 00:00", parent: "11", progress: 0, duration: 0 }
],
links: [
{ id: "2", source: "2", target: "3", type: "0" },
{ id: "3", source: "3", target: "4", type: "0" },
{ id: "7", source: "8", target: "9", type: "0" },
{ id: "8", source: "9", target: "10", type: "0" },
{ id: "16", source: "17", target: "25", type: "0" },
{ id: "17", source: "18", target: "19", type: "0" },
{ id: "18", source: "19", target: "20", type: "0" },
{ id: "22", source: "13", target: "24", type: "0" },
{ id: "23", source: "25", target: "18", type: "0" }
]
});
下一步是激活工具欄。
首先您添加按鈕，將有助于展開和折疊所有任務(wù)：
// Toolbar handlers
document.getElementById('expandAll').addEventListener('click', function () {
gantt.eachTask(function (task) {
task.$open = true;
});
gantt.render();
});
document.getElementById('collapseAll').addEventListener('click', function () {
gantt.eachTask(function (task) {
task.$open = false;
});
gantt.render();
});
之后添加縮放滑塊功能，用于放大和縮小甘特圖。
document.getElementById('zoomSlider').addEventListener('input', function () {
const zoomLevel = parseInt(this.value, 10);
gantt.ext.zoom.setLevel(zoomLevel);
});
Step 2：保存和恢復(fù)展開和折疊任務(wù)的狀態(tài)
現(xiàn)在我們終于可以達(dá)到本教程的主要目標(biāo)，即保存分支的狀態(tài)并在頁面重新加載后恢復(fù)它。
您可以使用localStorage存儲狀態(tài)，如下所示：
// State of opened/closed branches
function saveBranchesState() {
const state = {};
gantt.eachTask((task) => {
state[task.id] = !!task.$open;
});
localStorage.setItem('gantt_expanded_tasks', JSON.stringify(state));
}
function restoreBranchesState() {
const expandedTasks = JSON.parse(localStorage.getItem('gantt_expanded_tasks') || "{}");
gantt.eachTask((task) => {
if (expandedTasks[task.id] !== undefined) {
task.$open = expandedTasks[task.id];
}
})
gantt.render();
}
每次分支被展開或折疊時，您都需要保存狀態(tài)，并在任務(wù)被加載到甘特圖中時恢復(fù)狀態(tài)：
gantt.attachEvent("onTaskClosed", saveBranchesState);
gantt.attachEvent("onTaskOpened", saveBranchesState);
gantt.attachEvent("onParse", restoreBranchesState, { once: true });
當(dāng)用戶按下工具欄中的全部展開/全部折疊按鈕時，也需要保存甘特圖狀態(tài)：
// Toolbar handlers
document.getElementById('expandAll').addEventListener('click', function () {
…
saveBranchesState();
});
document.getElementById('collapseAll').addEventListener('click', function () {
…
saveBranchesState();
});
Step 3：保存和恢復(fù)縮放狀態(tài)
類似地，您可以實現(xiàn)存儲和恢復(fù)Zoom狀態(tài)的函數(shù)。
function saveZoomState() {
const zoomLevel = gantt.ext.zoom.getCurrentLevel();
localStorage.setItem('gantt_zoom_level', zoomLevel);
document.getElementById('zoomSlider').value = zoomLevel;
}
function restoreZoomState() {
const zoomLevel = localStorage.getItem('gantt_zoom_level');
if (zoomLevel) {
gantt.ext.zoom.setLevel(zoomLevel);
document.getElementById('zoomSlider').value = zoomLevel;
}
}
當(dāng)最終用戶在工具欄中更改縮放級別時保存該狀態(tài)，在頁面上初始化甘特圖時恢復(fù)該狀態(tài)：
document.getElementById('zoomSlider').addEventListener('input', function () {
const zoomLevel = parseInt(this.value, 10);
gantt.ext.zoom.setLevel(zoomLevel);
saveZoomState();
});
gantt.attachEvent("onGanttReady", restoreZoomState);
按照上面的步驟，您可以像本示例一樣實現(xiàn)永久甘特圖狀態(tài)。
總結(jié)
本教程清楚地解釋了如何構(gòu)建甘特圖，以保留展開/折疊分支的狀態(tài)以及頁面重新加載之間的縮放級別。此實現(xiàn)通過確保維護(hù)用戶的自定義來增強用戶體驗，從而節(jié)省時間和精力。
如需了解更多產(chǎn)品資訊，歡迎咨詢“”！
標(biāo)簽：
本站文章除注明轉(zhuǎn)載外，均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載，但請務(wù)必注明出處、不得修改原文相關(guān)鏈接，如果存在內(nèi)容上的異議請郵件反饋至chenjj@fc6vip.cn
文章轉(zhuǎn)載自：慧都網(wǎng)
金喜正規(guī)買球 
18次
相關(guān)產(chǎn)品
正式授權(quán)
最新文章 
金喜正規(guī)買球相關(guān)的文章 
微信
在線咨詢
渝公網(wǎng)安備
50010702500608號
客服熱線