dhtmlxGantt是用于跨瀏覽器和跨平臺應(yīng)用程序的功能齊全的Gantt圖表?？蓾M足項目管理應(yīng)用程序的所有需求，是最完善的圖表庫。

點擊下載dhtmlxGantt最新版

7.0版不僅為我們的客戶端庫提供了幾個主要更新，而且還為Node.js推出了開拓性的服務(wù)器端甘特模塊。該服務(wù)器附加組件將使您能夠訪問DHTMLX Gantt的邏輯，并使您能夠執(zhí)行計劃分析，接收來自不同來源的用戶操作觸發(fā)的實時更新以及相應(yīng)地同步Gantt計劃。

客戶端庫v7.0的新功能包括使用合并的日歷將具有不同工作日歷的資源分配給同一任務(wù)，以分鐘為單位設(shè)置工作時間，通過拖放對Grid列進行重新排序，自定義快速信息的功能彈出窗口，通過使其寬度靈活來調(diào)整Grid列，并通過API操縱內(nèi)容安全策略（CSP）兼容性。此外，DHTMLX Gantt中的包結(jié)構(gòu)以及本地化和擴展的工作方式也有所變化。在我們的文章中深入研究發(fā)行細節(jié)。

v7.0最具突破性的新穎之處是引入了DHTMLX Gantt庫的服務(wù)器端版本。現(xiàn)在有一個旨在在服務(wù)器上運行的DHTMLX Gantt的Node.js構(gòu)建。

它為開發(fā)人員提供了在服務(wù)器端使用DHTMLX Gantt的復(fù)雜邏輯的機會，例如自動調(diào)度、關(guān)鍵路徑和工作時間計算。這對于同步來自不同來源（例如臺式機和移動應(yīng)用程序或同一應(yīng)用程序的不同組件）的多個用戶的操作以及在服務(wù)器端進行調(diào)度分析并在客戶端實時更新甘特（Gantt）至關(guān)重要。

由于DHTMLX Gantt for Node.js是作為單獨的軟件包提供的，因此您可以根據(jù)任何商業(yè)許可（商業(yè)、企業(yè)或Ultimate）將其作為Gantt客戶端版本的附件來獲取。

以分鐘為單位指定工作時間

從v7.0開始，可以通過setWorkTime屬性以小時為單位，也可以以分鐘為單位設(shè)置工作時間。 因此，一個工作日可以從上午08:15開始并在下午12:45結(jié)束。

為此，您需要將duration_unit配置選項指定為“分鐘”：

gantt.config.duration_unit = "minute";

// sets the working time up to minutes
gantt.setWorkTime({hours:["8:15-12:45"]})

在下面的示例中，我們將分配任務(wù)1.1的工作日的開始時間從08:15更改為08:45：

合并多個工作日歷[PRO]

靈活的工作時間以及員工的浮動或輪班時間表使得很難估算項目的工作量和時間表。為了克服這些困難，我們引入了一項新功能，可以將不同的工作日歷合并到v7.0中。

最終的工作時間表將基于項目中涉及的員工的重疊工作時間。例如，如果一個員工的工作時間是從上午8點到下午4點，而另一名員工的工作時間是從上午11點到晚上7點，則合并日歷的工作時間表是從上午11點到下午4點。因此，當您將多名員工分配到一項任務(wù)時，該任務(wù)的持續(xù)時間將根據(jù)其共同的工作時間進行計算。

通過將gantt.config.dynamic_resource_calendars配置選項設(shè)置為true，可以自動將不同的日歷合并為一個日歷。

讓我們以John和Anna的兩個不同的工作日歷為例。John在星期一，星期三和星期五工作，而Anna在星期一，星期二，星期五和星期六工作。如果啟用dynamic_resource_calendars配置，則當John和Anna的工作日歷分配給同一任務(wù)時，它們會自動合并。實際上，這意味著他們將只能在星期一和星期五執(zhí)行一項常見任務(wù)：

// automatically merge working calendars when multiple resources assigned to a task
        gantt.config.dynamic_resource_calendars = true;
        gantt.config.resource_property = "users";
        gantt.config.resource_calendars = {
            1: gantt.addCalendar({
                worktime: {
                    days: [0, 1, 0, 1, 0, 1, 0]
                }
            }),
            2: gantt.addCalendar({
                worktime: {
                    days: [0, 1, 1, 0, 0, 1, 1]
                }
            })
        };

如下圖所示，完成John和Anna的任務(wù)1需要5個工作日，但考慮到根據(jù)合并后的工作日歷，它們都只在星期一和星期五可用，因此Task 1的總工期為15 天：

如果只需要合并特定資源的工作日歷，則可以在mergeCalendars方法的幫助下手動進行。

在下面的示例中，我們使用mergeCalendars方法合并John和Anna的工作日歷：

const johnCalendarId = gantt.addCalendar({
    worktime: {
        hours: ["0:00-24:00"],
        days: [0, 1, 0, 1, 0, 1, 0]
    }
});
const annaCalendarId = gantt.addCalendar({
    worktime: {
        hours: ["8:00-12:00", "13:00-17:00"],
        days: [0, 1, 1, 0, 0, 1, 1]
    }
});

const joinedCalendar = gantt.mergeCalendars(
    gantt.getCalendar(johnCalendarId),
    gantt.getCalendar(annaCalendarId)
);

除了此重要的配置更新之外，我們還添加了getResourceCalendar方法，該方法返回分配的資源的日歷，并更新了resource_calendar配置。此外，從現(xiàn)在開始，甘特特將在任務(wù)日歷更改時自動重新計算項目進度。

自定義快速信息彈出窗口

V7.0推出了DHTMLX Gantt的新自定義選項。 通過引入gantt.ext.quickInfo配置對象以及一系列方法來控制“快速信息”彈出窗口的外觀，我們擴展了“快速信息”擴展的功能：

• show（）方法允許指定一個任務(wù)，針對該任務(wù)應(yīng)顯示彈出窗口，以及指定在何處顯示彈出窗口的X和Y坐標。
• hide（）方法可以立即隱藏彈出窗口或應(yīng)用動畫效果。
• setContent（配置：對象）方法定義彈出內(nèi)容中包含的內(nèi)容，例如標題元素和按鈕。

gantt.locale.labels.custom_button = "My button"
gantt.ext.quickInfo.setContent({
    header:{
        title: "My custom header",
        date: "18th of February, 2020"
    },
    content: "some content here",
    buttons: ["custom_button"]
})

通過Drag-n-Drop重新排序網(wǎng)格列

由于新的配置選項reorder_grid_columns，您可以通過簡單地使用拖放操作移動列來更改網(wǎng)格中的列順序。 默認情況下，此功能處于禁用狀態(tài)。 您可以通過以下方式啟用它：

gantt.config.reorder_grid_columns = true;

如果需要，可以在CSS類的幫助下對拖動的列進行樣式設(shè)置，并突出顯示標記放置位置的標記。

網(wǎng)格中列的靈活寬度

根據(jù)用戶的要求，我們決定為Grid列在Gantt中的顯示方式增加更多的靈活性。 由于新的配置選項grid_elastic_columns，列將通過收縮或拉伸來適合表的寬度。 僅當列的最小寬度太小而無法顯示其內(nèi)容時，才會顯示水平滾動。

默認情況下，此功能處于禁用狀態(tài)，因此列的寬度是固定的。 為了啟用它，您需要將grid_elastic_column配置設(shè)置為true：

gantt.config.grid_elastic_columns = true;

作為錦上添花，現(xiàn)在您可以應(yīng)用text-overflow：省略號屬性，以一種簡潔的方式顯示列的裁剪內(nèi)容：

請注意，從v7.0開始，甘特圖在其左側(cè)網(wǎng)格列中使用CSS flexbox布局，這可能會影響DHTMLX甘特圖中網(wǎng)格的樣式。

內(nèi)容安全政策更新

從v7.0開始，內(nèi)容安全策略擴展被config.csp配置選項取代，該選項可以立即使用：

gantt.config.csp = "auto";

此配置選項使甘特CSP兼容，并同時確保實現(xiàn)可保持組件高速的高性能代碼。

默認情況下，配置設(shè)置為“自動”，因此甘特特公司可以在可能的情況下使用高性能代碼，并在必要時使用兼容CSP的代碼。 但是，根據(jù)您的需要，您可以通過指定gantt.config.csp = false來禁用此配置并使Gantt使用高性能的方法，或者將gantt.config.csp設(shè)置為true，以始終應(yīng)用CSP兼容代碼。

此外，現(xiàn)在DHTMLX Gantt僅使用有效的HTML5數(shù)據(jù)屬性。

CSP更新使我們的JS Gantt圖表（尤其是Salesforce Lightning）更加方便地工作。

EV-APS是慧都科技15年行業(yè)經(jīng)驗以及技術(shù)沉淀之作，通過連接企業(yè)接單、采購、制造、倉儲物流等整個供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。
本教程內(nèi)容到這里就結(jié)束了，感興趣的朋友可以繼續(xù)關(guān)注我們慧都網(wǎng)哦~