福利导航网址,91桃色下载,国产家教老

項目管理工具dhtmlxGantt甘特圖入門教程（八）：數據加載（三）

翻譯|使用教程|編輯：秦林|2022-10-08 10:32:38.870|閱讀 195 次

概述：這篇文章給大家講解如何利用 dhtmlxGantt正確保存和顯示任務的結束日期。

# 界面/圖表報表/文檔/IDE等千款熱門軟控件火熱銷售中 >>

相關鏈接：

這篇文章給大家講解如何利用 dhtmlxGantt正確保存和顯示任務的結束日期，本節將給你一個明確答案。

DhtmlxGantt正版試用下載

首先，讓我們考慮一下在處理任務日期時可能會遇到的兩種情況：

方案1

當任務持續時間以天為單位測量時 (duration_unit="day")
當任務數據對象包含“%Y-%m-%d”或“%d-%m-%Y”格式的開始和結束日期時（即沒有小時-分鐘部分）

由于dhtmlxGantt如何解釋和存儲任務結束日期的詳細信息，結果日期可能具有不期望的值。

看看下面的例子：

gantt.parse({ tasks: [
{ 
id: 1,
text: "Task 1",
start_date: "22-12-2021",
end_date: "22-12-2021"
}
]}, links:[]);
console.log(gantt.getTask(1).end_date);
// 22 December 2021 00:00:00
console.log(gantt.getTask(1).duration);
// 0

在此示例中，開始日期和結束日期將引用相同的時間點，并且任務持續時間將為0。

方案2

當任務的結束日期顯示在網格中時
并且結束日期的格式不包括小時-分鐘部分

gantt.config.columns = [
{name: "text", label: "Name", tree: true, width: 200, resize: true},
{name: "duration", label: "Duration", width:80, align: "center", resize: true},
{name: "start_date", label: "Start", width:80, align: "center", resize: true},
{name: "end_date", label: "Finish", width:80, align: "center", resize: true}
];
gantt.init("gantt_here");
gantt.parse({ tasks: [
{ 
id: 1,
text: "Task 1",
start_date: "02-04-2020",
end_date: "02-04-2020"
}
]}, links:[]);

在此示例中，完成日期（任務的結束日期）指定為4月3日，而任務本身在4月2日結束。

我們將在下面解釋甘特圖如何存儲結束日期的詳細信息。

甘特圖如何存儲結束日期？

即使您沒有指定任務日期的小時-分鐘部分（duration_unit = "day"），dhtmlxGantt 也始終將其保存為 JS Date，它在客戶端具有小時-分鐘-秒-毫秒部分。

結束日期的當前格式如下：

日期的秒和毫秒部分始終為0，甘特圖不支持小于1分鐘的單位
任務的結束日期被指定為最后一個忙碌日（“日-時-分”）之后的一天的開始（“日-時-分”）。是：

從4月2日開始并持續 1 天的任務將具有以下開始和結束日期："02-04-2022 00:00:00 - 03-04-2022 00:00:00"。結束日期將與4月2日之后一天的開始日期一致

從4月2日 13:00 開始并持續 1 小時的任務將具有以下開始和結束日期：“02-04-2022 13:00:00 - 02-04-2022 14:00:00” . 結束日期將匹配下一小時開始的日期

如果我們在屏幕上顯示任務的結束日期而不設置時分部分，結果可能會產生誤導。在場景 2的示例中，開始日期和結束日期將類似于“02-04-2022 - 03-04-2022”。這會讓你認為任務持續時間不是1天，而是2天（從4月2日到3日）。

這是默認行為，它可能會讓您感到困惑，但可以通過配置修復它。在接下來的部分中，我們將向您展示如何處理它的幾種方法。

如何更改默認行為？

1）您不應該首先更改存儲在甘特圖中的實際任務日期。

您可能還想修改加載到甘特圖中的任務日期，即將結束日期指定為 02-04-2022 23:59:59。但是你最好不要這樣做，因為這樣的決定可能會與任務持續時間的計算和自動調度相沖突。

相反，我們建議您使用以下方法：

2a)要更改甘特圖中任務結束日期的格式（即在任務持續時間中包含結束日期），您可以重新定義task_end_date 模板。

讓我們以2020年4月2日開始并持續一天的任務為例，考慮模板如何更改結束日期。

默認情況下，此任務的結束日期應顯示為2020年4月3日（03-04-2020 00:00:00）：

但是如果您應用task_end_date模板，則相同的任務將在2020年4月2日完成：

代碼如下所示：

<// override the columns config
  gantt.config.columns = [
{name: "wbs", label: "#", width: 60, align: "center", template: gantt.getWBSCode},
{name: "text", label: "Name", tree: true, width: 200, resize: true},
{name: "start_date", label: "Start", width:80, align: "center", resize: true},
{name: "end_date", label: "Finish", width:80, align: "center", resize: true}, 
{name:"add"}
];
// redefine the template
gantt.templates.task_end_date = function(date){
return gantt.templates.task_date(new Date(date.valueOf() - 1)); 
};
var gridDateToStr = gantt.date.date_to_str("%Y-%m-%d");
gantt.templates.grid_date_format = function(date, column){
if(column === "end_date"){
return gridDateToStr(new Date(date.valueOf() - 1)); 
}else{
return gridDateToStr(date); 
}
}
gantt.init("gantt_here");

通過這種方式，您可以更改網格中顯示的任務結束日期、燈箱的標題以及您需要顯示結束日期的任何其他位置。

如果您正在使用任務的包含結束日期的格式并希望使其與網格中的內聯編輯正常工作，則必須創建一個特殊的編輯器來編輯任務的包含結束日期，如下所示：

// inclusive editor for end dates
// use the default editor, but override the set_value/get_value methods
var dateEditor = gantt.config.editor_types.date;
gantt.config.editor_types.end_date = gantt.mixin({
    set_value: function(value, id, column, node){
        var correctedValue = gantt.date.add(value, -1, "day");
        return dateEditor.set_value.apply(this, [correctedValue, id, column, node]);
    },
    get_value: function(id, column, node) {
        var selectedValue = dateEditor.get_value.apply(this, [id, column, node]);
        return gantt.date.add(selectedValue, 1, "day");
    },
}, dateEditor);
 
var textEditor = {type: "text", map_to: "text"};
var startDateEditor = {type: "date", map_to: "start_date"};
var endDateEditor = {type: "end_date", map_to: "end_date"};
var durationEditor = {type: "number", map_to: "duration", min:0, max: 100};
 
gantt.config.columns = [
    {name: "text", label: "Name", tree: true, width: 200, editor: textEditor, 
        resize: true},
    {name: "duration", label: "Duration", width:80, align: "center", 
        editor: durationEditor, resize: true},
    {name: "start_date", label: "Start", width:140, align: "center", 
        editor: startDateEditor, resize: true},
    {name: "end_date", label: "Finish", width:140, align: "center", 
        editor: endDateEditor, resize: true}
];
 
// change lightbox and grid templates to display dates of tasks in an inclusive format
gantt.templates.task_end_date = function(date){
    return gantt.templates.task_date(new Date(date.valueOf() - 1)); 
};
 
var gridDateToStr = gantt.date.date_to_str("%Y-%m-%d");
gantt.templates.grid_date_format = function(date, column){
    if(column === "end_date"){
        return gridDateToStr(new Date(date.valueOf() - 1)); 
    }else{
        return gridDateToStr(date); 
    }
}

2b)如果應用程序的其他部分要求以“包含”格式存儲結束日期,即從2020年4 月2日開始并持續一天的任務需要使用start_date存儲：“02-04- 2022", end_date: "02-04-2022" - 您必須對結束日期進行額外處理，即：