DHTMLX Gantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。
在現代Web應用程序中，在頁面重新加載之間保持UI元素的狀態對于流暢的用戶體驗至關重要。
在本教程中我們將知道您完成DHTMLX Gantt中持久UI的簡單實現，重點關注一小部分特性——即任務的展開或折疊分支，以及選定的甘特圖縮放級別。您將了解如何將這些設置存儲在瀏覽器的本地存儲中并在以后恢復，以便在重新加載頁面后甘特圖保持一致。通過本教程的學習，您可以讓應用程序的最終用戶繼續保持他們離開的狀態，不需要重新配置設置，從而節省時間并提高效率。
為什么在甘特圖中需要持久的UI狀態？
在深入研究代碼之前，讓我們更詳細地考慮一下本教程的目標。
在下面的示例中，您可以將整個項目折疊成一個緊湊視圖，將其展開并使用簡單的工具在甘特圖的縮放級別之間切換。但是一旦重新加載頁面，所有更改將丟失。因為動態UI更改很少保存到數據庫中，但是在實踐中這對最終用戶非常不方便。
為了進行比較，您還可以測試下面的第二個示例，其中實現了持久狀態。
嘗試切換縮放級別或展開、折疊甘特圖中的某些分支，然后重新加載頁面。您將看到重新加載之前引入的所有更改甘特圖，可以為更好的甘特圖用戶體驗做出貢獻。
現在是時候向您展示如何逐步將持久UI狀態集成到JavaScript甘特圖中了。
Step 1：設置甘特圖
對于本教程，創建一個簡單的甘特圖并添加一個工具欄就足夠了，以便快速操作，如縮放和擴展分支。
您需要創建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>
在這里您為甘特圖創建了一個容器，并在其上放置了一個工具欄。工具欄包含展開和折疊所有任務的按鈕，以及調整縮放級別的滑塊。
這些控件將在下一步中描述的甘特圖初始化之后立即啟用。
配置并初始化甘特圖
在這個階段，您將使用Zoom擴展創建一個基本的甘特圖配置。不要被代碼的數量嚇倒，其中大部分是樣板時間刻度配置和測試數據。
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" }
]
});
下一步是激活工具欄。
首先您添加按鈕，將有助于展開和折疊所有任務：
// 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：保存和恢復展開和折疊任務的狀態
現在我們終于可以達到本教程的主要目標，即保存分支的狀態并在頁面重新加載后恢復它。
您可以使用localStorage存儲狀態，如下所示：
// 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();
}
每次分支被展開或折疊時，您都需要保存狀態，并在任務被加載到甘特圖中時恢復狀態：
gantt.attachEvent("onTaskClosed", saveBranchesState);
gantt.attachEvent("onTaskOpened", saveBranchesState);
gantt.attachEvent("onParse", restoreBranchesState, { once: true });
當用戶按下工具欄中的全部展開/全部折疊按鈕時，也需要保存甘特圖狀態：
// Toolbar handlers
document.getElementById('expandAll').addEventListener('click', function () {
…
saveBranchesState();
});
document.getElementById('collapseAll').addEventListener('click', function () {
…
saveBranchesState();
});
Step 3：保存和恢復縮放狀態
類似地，您可以實現存儲和恢復Zoom狀態的函數。
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;
}
}
當最終用戶在工具欄中更改縮放級別時保存該狀態，在頁面上初始化甘特圖時恢復該狀態：
document.getElementById('zoomSlider').addEventListener('input', function () {
const zoomLevel = parseInt(this.value, 10);
gantt.ext.zoom.setLevel(zoomLevel);
saveZoomState();
});
gantt.attachEvent("onGanttReady", restoreZoomState);
按照上面的步驟，您可以像本示例一樣實現永久甘特圖狀態。
總結
本教程清楚地解釋了如何構建甘特圖，以保留展開/折疊分支的狀態以及頁面重新加載之間的縮放級別。此實現通過確保維護用戶的自定義來增強用戶體驗，從而節省時間和精力。
如需了解更多產品資訊，歡迎咨詢“”！
標簽：
本站文章除注明轉載外，均為本站原創或翻譯。歡迎任何形式的轉載，但請務必注明出處、不得修改原文相關鏈接，如果存在內容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉載自：慧都網
半島外圍網上直營 
15次
相關產品
正式授權
最新文章 
半島外圍網上直營相關的文章 
微信
在線咨詢
渝公網安備
50010702500608號
客服熱線