翻譯|使用教程|編輯:龔雪|2024-07-31 10:09:41.540|閱讀 129 次
概述:本文主要介紹如何用DHTMLX Gantt將上下文菜單集成到JavaScript Gantt圖中,歡迎下載最新版組件體驗(yàn)!
# 界面/圖表報(bào)表/文檔/IDE等千款熱門軟控件火熱銷售中 >>
相關(guān)鏈接:
DHTMLX Gantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表??蓾M足項(xiàng)目管理應(yīng)用程序的所有需求,是最完善的甘特圖圖表庫。
DHTMLX Gantt是一個高度可定制的工具,可以與項(xiàng)目管理應(yīng)用程序所需的其他功能相補(bǔ)充。在本文中您將學(xué)習(xí)如何使用自定義上下文菜單來補(bǔ)充基于DHTMLX的JavaScript甘特圖,來提高用戶在任務(wù)管理中的效率??紤]到DHTMLX產(chǎn)品的良好互兼容性,DHTMLX Suite的Menu小部件是實(shí)現(xiàn)本教程目標(biāo)的甘特圖組件的完美補(bǔ)充。
在上文中(點(diǎn)擊這里回顧>>)為大家介紹了如何完成更改Tree等級、更改任務(wù)類型等操作,本文繼續(xù)介紹如何完成標(biāo)記完成、拆分任務(wù)等操作,希望對大家有所幫助~
 
 
有了這個上下文菜單項(xiàng),最終用戶可以顯示給定的任務(wù)已經(jīng)完成。
在代碼中,任務(wù)進(jìn)度參數(shù)的值應(yīng)該設(shè)置為1(即100%)。
case "complete": task.progress = 1; gantt.updateTask(task.id); break;
 
 
當(dāng)您需要將大型任務(wù)劃分為幾個更易于管理的部分時,此功能會派上用場。
當(dāng)點(diǎn)擊此選項(xiàng)時,所選任務(wù)似乎在點(diǎn)擊位置被分成2部分。實(shí)際上,一個原始任務(wù)有兩個副本,您可以在其中更改它們的id和start_date或end_date參數(shù),原始任務(wù)變成以拆分模式顯示的項(xiàng)目。
case "split":
gantt.batchUpdate(function () {
if (gantt.hasChild(task.id)) {
gantt.message("The task already has children, so, it won't be split to new sub tasks");
return;
}
const leftChild = gantt.copy(task);
leftChild.id = gantt.uid();
leftChild.end_date = new Date(clickDate);
leftChild.parent = task.id;
leftChild.type = "task";
const rightChild = gantt.copy(task);
rightChild.id = gantt.uid();
rightChild.start_date = new Date(clickDate)
rightChild.parent = task.id;
rightChild.type = "task";
task.render = 'split';
task.type = "project";
gantt.updateTask(task.id);
gantt.close(task.id);
gantt.addTask(leftChild);
gantt.addTask(rightChild);
})
break;
如果一個任務(wù)已經(jīng)被分成兩個部分,那么每個部分也可以被分成兩個部分。在底層下,樹狀結(jié)構(gòu)發(fā)生了變化。
要把它帶回來,必須點(diǎn)擊“Unsplit parent”。這里需要調(diào)用unsplit函數(shù),它只在“project”類型的任務(wù)中調(diào)用。此選項(xiàng)僅在網(wǎng)格中可用,但如果任務(wù)展開,它將不再顯示在拆分模式中,然后該選項(xiàng)將在時間軸中可用。
case "unsplit": unsplit(task) break;
unsplit函數(shù)在父任務(wù)中也用于相同的目的。
case "unsplit_parent": const parent = gantt.getTask(task.parent); unsplit(parent) break;
該函數(shù)刪除任務(wù)的所有后代,任務(wù)本身接收任務(wù)類型。任務(wù)的開始和結(jié)束日期不會更改,并且它不再出現(xiàn)在拆分模式中。
function unsplit(task) {
gantt.batchUpdate(function () {
gantt.eachTask(function (child) {
if (gantt.isTaskExists(child.id)) {
gantt.deleteTask(child.id);
}
}, task.id)
delete task.render;
task.type = "task";
gantt.updateTask(task.id);
})
}
這就是關(guān)于上下文菜單操作的所有內(nèi)容,現(xiàn)在我們想向您展示如何實(shí)現(xiàn)其他一些功能,例如隱藏任務(wù)或標(biāo)記任務(wù)來進(jìn)行剪切和復(fù)制。
要隱藏任務(wù),您需要使用onBeforeTaskDisplay事件處理程序。如果返回false,任務(wù)將不會顯示在甘特圖中,檢查任務(wù)ID是否在hiddenTasks對象中。如果該ID包含任務(wù)的真實(shí)值,則該任務(wù)將被隱藏。
let hiddenTasks = {};
gantt.attachEvent("onBeforeTaskDisplay", function (id, task) {
return !hiddenTasks[task.id]
});
現(xiàn)在,讓我們繼續(xù)研究pasteTasks函數(shù)。
首先,迭代tasksToCopy數(shù)組。在此數(shù)組中,按ID獲取任務(wù)對象,執(zhí)行任務(wù)的深度拷貝,更改其ID,并將任務(wù)添加到甘特圖。
tasksToCopy.forEach(function (id) {
const task = gantt.getTask(id);
const clone = gantt.copy(task);
clone.id = gantt.uid();
gantt.addTask(clone, parentId, index);
});
之后,迭代taskstock數(shù)組。在這里,您應(yīng)該使用moveTask()方法將任務(wù)移動到不同的父任務(wù)和新位置。
tasksToCut.forEach(function (id) {
gantt.moveTask(id, index, parentId);
});
如果復(fù)制或移動任務(wù)的任務(wù)成為父任務(wù),請打開它,然后需要清空tasksToCopy和tasksToCut數(shù)組。
gantt.open(parentId); tasksToCopy = []; tasksToCut = [];
在grid_row_class和task_class模板中,如果任務(wù)ID在tasksToCopy數(shù)組中,則返回類名task_to_copy,如果任務(wù)ID在tasksToCut數(shù)組中,則返回task_to_cut。
gantt.templates.grid_row_class =
gantt.templates.task_class = function (start, end, task) {
if (tasksToCopy.indexOf(task.id) > -1) {
return "task_to_copy"
}
if (tasksToCut.indexOf(task.id) > -1) {
return "task_to_cut"
}
return "";
};
這些類有兩種類型的樣式:
1. 不透明度
.task_to_cut.gantt_row,
.task_to_cut.gantt_row.odd,
.task_to_cut.gantt_task_line {
opacity: 0.5;
}
2. 邊界
.task_to_copy.gantt_row,
.task_to_copy.gantt_row.odd,
.task_to_copy.gantt_task_line {
border: 2px dotted LightSkyBlue;
}
此外,禁用round_dnd_dates配置,以便任務(wù)可以移動到任何位置,并且甘特圖不會將它們捕捉到時間軸單元格。
gantt.config.round_dnd_dates = false;
劃分任務(wù)后,其持續(xù)時間可能大于或小于1天。任務(wù)移動到新位置后,甘特圖將重新計(jì)算任務(wù)持續(xù)時間,該持續(xù)時間將四舍五入到最接近的整數(shù)。然后,甘特圖根據(jù)任務(wù)持續(xù)時間重新計(jì)算結(jié)束日期。
當(dāng)任務(wù)持續(xù)時間變?yōu)?時,任務(wù)會縮小,不方便拖動,因此有必要將duration參數(shù)修改為大于0。
gantt.attachEvent("onTaskDrag", function (id, mode, task, original) {
task.duration = task.duration || 1
});
事實(shí)上,可以用其他單位計(jì)算任務(wù)持續(xù)時間,并以不同的方式顯示此參數(shù)(例如,以小數(shù)單位)。
如你所見,使用上下文菜單可以顯著增強(qiáng)甘特圖應(yīng)用程序的功能和用戶體驗(yàn)。如果您決定在項(xiàng)目管理中使用DHTMLX Gantt,不需要任何第三方工具來實(shí)現(xiàn)自定義上下文菜單,HTMLX Suite庫中的Menu小部件是實(shí)現(xiàn)此目的的理想工具。
本站文章除注明轉(zhuǎn)載外,均為本站原創(chuàng)或翻譯。歡迎任何形式的轉(zhuǎn)載,但請務(wù)必注明出處、不得修改原文相關(guān)鏈接,如果存在內(nèi)容上的異議請郵件反饋至chenjj@ke049m.cn
文章轉(zhuǎn)載自:慧都網(wǎng)