DHTMLX Gantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表。可滿足項(xiàng)目管理應(yīng)用程序的大部分開發(fā)需求，具備完善的甘特圖圖表庫，功能強(qiáng)大，價(jià)格便宜，提供豐富而靈活的JavaScript API接口，與各種服務(wù)器端技術(shù)（PHP，ASP.NET，Java等）簡單集成，滿足多種定制開發(fā)需求。本文給大家講解DHTMLX Gantt的任務(wù)內(nèi)容如何顯示，歡迎大家下載最新版試用體驗(yàn)。

DHTMLX Gantt正版試用下載

拖動允許用戶快速更改任務(wù)的開始（結(jié)束）日期及其持續(xù)時(shí)間。
默認(rèn)情況下，拖放是啟用的，用戶可以在時(shí)間線中沿著它的行拖動任務(wù)。

要自定義拖放行為，請使用以下事件：

• - 拒絕拖動特定任務(wù)
• - 限制拖動區(qū)域或在用戶拖動任務(wù)時(shí)提供一些其他邏輯
• - 在任務(wù)被拖到新位置后進(jìn)行后處理

1、拒絕拖拽特定任務(wù)

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
if(gantt.getGlobalTaskIndex(id)%2==0){
return false; //denies dragging if the global task index is odd
}
return true; //allows dragging if the global task index is even
});

2、拒絕將任務(wù)拖出特定日期

拒絕將任務(wù)拖出特定日期，請使用事件。

onTaskDrag 事件：

• 每次用戶在時(shí)間軸區(qū)域中使用鼠標(biāo)進(jìn)行拖動移動時(shí)觸發(fā)：移動、調(diào)整任務(wù)大小或更改任務(wù)進(jìn)度。
• 拖動運(yùn)動的類型作為第二個(gè)參數(shù)-mode傳遞。
• 拖動運(yùn)動類型的所有可用值都存儲在屬性中。

很快，一切都按以下順序發(fā)生：

1. 用戶移動。
2. dhtmlxGantt 根據(jù)新位置重新計(jì)算任務(wù)的日期。
3. dhtmlxGantt 觸發(fā)事件。
4. dhtmlxGantt 在甘特圖中重新呈現(xiàn)任務(wù)。
   
   由于onTaskDrag事件在 dhtmlxGantt 重新計(jì)算后觸發(fā)，您可以在事件處理程序中為拖動的任務(wù)指定任何自定義值，而不必?fù)?dān)心這些值會被覆蓋。結(jié)果，任務(wù)將呈現(xiàn)在所需位置。

假設(shè)您要禁止用戶將任務(wù)拖出“2020 年 3 月 31 日 - 2020 年 4 月 11 日”的時(shí)間間隔。

然后，您可以使用以下代碼：

拒絕將任務(wù)拖出間隔 - [31.03.2020, 11.04.2020]

var leftLimit = new Date(2020, 2 ,31), rightLimit = new Date(2020, 3 ,12);

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
var modes = gantt.config.drag_mode;
if(mode == modes.move || mode == modes.resize){

var diff = original.duration*(1000*60*60*24);

if(+task.end_date > +rightLimit){
task.end_date = new Date(rightLimit);
if(mode == modes.move)
task.start_date = new Date(task.end_date - diff);
}
if(+task.start_date < +leftLimit){
task.start_date = new Date(leftLimit);
if(mode == modes.move)
task.end_date = new Date(+task.start_date + diff);
}
}
});

3、將父項(xiàng)與子項(xiàng)一起拖動

要在用戶拖動其父項(xiàng)的任務(wù)時(shí)允許拖動子項(xiàng)，請使用事件（請參閱事件的更多信息）：

gantt.attachEvent("onTaskDrag", function(id, mode, task, original){
var modes = gantt.config.drag_mode;
if(mode == modes.move){
var diff = task.start_date - original.start_date;
gantt.eachTask(function(child){
child.start_date = new Date(+child.start_date + diff);
child.end_date = new Date(+child.end_date + diff);
gantt.refreshTask(child.id, true);
},id );
}
});
//rounds positions of the child items to scale
gantt.attachEvent("onAfterTaskDrag", function(id, mode, e){
var modes = gantt.config.drag_mode;
if(mode == modes.move ){
var state = gantt.getState();
gantt.eachTask(function(child){
child.start_date = gantt.roundDate({
date:child.start_date,
unit:state.scale_unit,
step:state.scale_step
});
child.end_date = gantt.calculateEndDate(child.start_date,
child.duration, gantt.config.duration_unit);
gantt.updateTask(child.id);
},id );
}
});

4、拖動帶有子任務(wù)的項(xiàng)目 （此功能僅在 Gantt PRO 版本中可用。）

默認(rèn)情況下，項(xiàng)目類型的任務(wù)不可拖動。您可以使用配置啟用項(xiàng)目拖放：

gantt.config.drag_project = true;

5、將依賴任務(wù)與獨(dú)立任務(wù)拖在一起

有幾種方法可以實(shí)現(xiàn)隨其相關(guān)任務(wù)一起移動的任務(wù)。”中閱讀所有這些內(nèi)容。

6、設(shè)置最短任務(wù)持續(xù)時(shí)間

可以通過min_duration設(shè)置指定最短任務(wù)持續(xù)時(shí)間。

該選項(xiàng)定義了在調(diào)整大小時(shí)可以設(shè)置的任務(wù)的最小大小，可用于防止用戶設(shè)置零持續(xù)時(shí)間。

該值以毫秒為單位設(shè)置：

// 1 day
gantt.config.min_duration = 24*60*60*1000;

//OR

// 1 hour
gantt.config.min_duration = 60*60*1000;

7、在任務(wù)拖動期間自動滾動

如果您在甘特圖中有一個(gè)大型數(shù)據(jù)集，您通常需要將任務(wù)拖到一個(gè)新的較遠(yuǎn)位置，或者在相距很遠(yuǎn)的任務(wù)之間設(shè)置鏈接。

在這種情況下，自動滾動功能會有很大幫助。它默認(rèn)啟用，但您可以通過自動滾動配置選項(xiàng)管理此行為。

gantt.config.autoscroll = false;
gantt.init("gantt_here");
此外，您可以借助相應(yīng)的屬性 - autoscroll_speed以毫秒為單位調(diào)整自動滾動的速度：

gantt.config.autoscroll = true;
gantt.config.autoscroll_speed = 50;

gantt.init("gantt_here");

8、禁用調(diào)整特定任務(wù)的大小

如果你想阻止某些任務(wù)被調(diào)整大小，你可以做兩件事：

通過 CSS 從 UI 中刪除任務(wù)的調(diào)整大小句柄。為此，您需要使用task_class模板向所需項(xiàng)目添加一個(gè)額外的 CSS 類，以便您可以通過選擇器找到它們：

gantt.templates.task_class = function(start, end, task){
if(task.no_resize) { // no_resize is a custom property used for the demonstration
return "no_resize";
}
return "";

.no_resize .gantt_task_drag{
display: none !important;
}
使用onBeforeTaskDrag事件防止代碼拖放。從處理程序返回false將阻止調(diào)整大小：
gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
if(mode === "resize" && gantt.getTask(id).no_resize){
return false;
}
return true;
});

9、任務(wù)的哪一側(cè)正在調(diào)整大小

拖放的“調(diào)整大小”模式意味著用戶可以從開始日期或結(jié)束日期調(diào)整任務(wù)的大小。

如果您需要通過調(diào)整大小找出用戶正在修改的日期，您可以使用gantt.getState().drag_from_start標(biāo)志：

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
if(mode === "resize"){
if(gantt.getState().drag_from_start === true) {
// changing the start date of a task
} else {
// changing the end date of a task
}
}
return true;
});

10、禁用調(diào)整任務(wù)開始或結(jié)束日期的大小

您可以使用以下選擇器定位調(diào)整大小手柄：

.gantt_task_drag[data-bind-property="start_date"]
.gantt_task_drag[數(shù)據(jù)綁定屬性=“結(jié)束日期”]

.gantt_task_drag[data-bind-property="start_date"]{
display: none !important;
}

.gantt_task_drag[data-bind-property="end_date"]{
display: none !important;
}

gantt.attachEvent("onBeforeTaskDrag", function(id, mode, e){
if(mode === "resize"){
if(gantt.getState().drag_from_start === true) {
return false;
} else {
// changing the end date of a task
}
}
return true;
});

DHTMLX Gantt享有超十年聲譽(yù)，支持跨瀏覽器和跨平臺，性價(jià)比高，可滿足項(xiàng)目管理控件應(yīng)用的所有需求，是最完善的甘特圖圖表庫。

慧都2022年終狂歡火熱進(jìn)行中，全場產(chǎn)品超低價(jià)，DHTMLX全系產(chǎn)品享8.8折！了解更多活動詳情，歡迎訪問慧都網(wǎng)咨詢。

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

慧都年終狂歡季，全場產(chǎn)品，限時(shí)特惠，立即了解詳情！