dhtmlxGantt是用於跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求,是最完善的圖表庫。
7.0版不僅爲我們的客戶端庫提供了幾個主要更新,而且還爲Node.js推出了開拓性的服務器端甘特模塊。該服務器附加組件將使您能夠訪問DHTMLX Gantt的邏輯,並使您能夠執行計劃分析,接收來自不同來源的用戶操作觸發的實時更新以及相應地同步Gantt計劃。
客戶端庫v7.0的新功能包括使用合併的日曆將具有不同工作日曆的資源分配給同一任務,以分鐘爲單位設置工作時間,通過拖放對Grid列進行重新排序,自定義快速信息的功能彈出窗口,通過使其寬度靈活來調整Grid列,並通過API操縱內容安全策略(CSP)兼容性。此外,DHTMLX Gantt中的包結構以及本地化和擴展的工作方式也有所變化。在我們的文章中深入研究發行細節。
在服務器上將DHTMLX Gantt與Node.js結合使用[新附加組件]
v7.0最具突破性的新穎之處是引入了DHTMLX Gantt庫的服務器端版本。現在有一個旨在在服務器上運行的DHTMLX Gantt的Node.js構建。
它爲開發人員提供了在服務器端使用DHTMLX Gantt的複雜邏輯的機會,例如自動調度、關鍵路徑和工作時間計算。這對於同步來自不同來源(例如臺式機和移動應用程序或同一應用程序的不同組件)的多個用戶的操作以及在服務器端進行調度分析並在客戶端實時更新甘特(Gantt)至關重要。
由於DHTMLX Gantt for Node.js是作爲單獨的軟件包提供的,因此您可以根據任何商業許可(商業、企業或Ultimate)將其作爲Gantt客戶端版本的附件來獲取。
以分鐘爲單位指定工作時間
從v7.0開始,可以通過setWorkTime屬性以小時爲單位,也可以以分鐘爲單位設置工作時間。 因此,一個工作日可以從上午08:15開始並在下午12:45結束。
爲此,您需要將duration_unit配置選項指定爲“分鐘”:
gantt.config.duration_unit = "minute"; // sets the working time up to minutes gantt.setWorkTime({hours:["8:15-12:45"]})
在下面的示例中,我們將分配任務1.1的工作日的開始時間從08:15更改爲08:45:
合併多個工作日曆[PRO]
靈活的工作時間以及員工的浮動或輪班時間表使得很難估算項目的工作量和時間表。爲了克服這些困難,我們引入了一項新功能,可以將不同的工作日曆合併到v7.0中。
最終的工作時間表將基於項目中涉及的員工的重疊工作時間。例如,如果一個員工的工作時間是從上午8點到下午4點,而另一名員工的工作時間是從上午11點到晚上7點,則合併日曆的工作時間表是從上午11點到下午4點。因此,當您將多名員工分配到一項任務時,該任務的持續時間將根據其共同的工作時間進行計算。
通過將gantt.config.dynamic_resource_calendars配置選項設置爲true,可以自動將不同的日曆合併爲一個日曆。
讓我們以John和Anna的兩個不同的工作日曆爲例。John在星期一,星期三和星期五工作,而Anna在星期一,星期二,星期五和星期六工作。如果啓用dynamic_resource_calendars配置,則當John和Anna的工作日曆分配給同一任務時,它們會自動合併。實際上,這意味着他們將只能在星期一和星期五執行一項常見任務:
// 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的任務1需要5個工作日,但考慮到根據合併後的工作日曆,它們都只在星期一和星期五可用,因此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配置。此外,從現在開始,甘特特將在任務日曆更改時自動重新計算項目進度。
自定義快速信息彈出窗口
V7.0推出了DHTMLX Gantt的新自定義選項。 通過引入gantt.ext.quickInfo配置對象以及一系列方法來控制“快速信息”彈出窗口的外觀,我們擴展了“快速信息”擴展的功能:
show()方法允許指定一個任務,針對該任務應顯示彈出窗口,以及指定在何處顯示彈出窗口的X和Y座標。
hide()方法可以立即隱藏彈出窗口或應用動畫效果。
setContent(配置:對象)方法定義彈出內容中包含的內容,例如標題元素和按鈕。
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重新排序網格列
由於新的配置選項reorder_grid_columns,您可以通過簡單地使用拖放操作移動列來更改網格中的列順序。 默認情況下,此功能處於禁用狀態。 您可以通過以下方式啓用它:
gantt.config.reorder_grid_columns = true;
如果需要,可以在CSS類的幫助下對拖動的列進行樣式設置,並突出顯示標記放置位置的標記。
網格中列的靈活寬度
根據用戶的要求,我們決定爲Grid列在Gantt中的顯示方式增加更多的靈活性。 由於新的配置選項grid_elastic_columns,列將通過收縮或拉伸來適合表的寬度。 僅當列的最小寬度太小而無法顯示其內容時,纔會顯示水平滾動。
默認情況下,此功能處於禁用狀態,因此列的寬度是固定的。 爲了啓用它,您需要將grid_elastic_column配置設置爲true:
gantt.config.grid_elastic_columns = true;
作爲錦上添花,現在您可以應用text-overflow:省略號屬性,以一種簡潔的方式顯示列的裁剪內容:
請注意,從v7.0開始,甘特圖在其左側網格列中使用CSS flexbox佈局,這可能會影響DHTMLX甘特圖中網格的樣式。
內容安全政策更新
從v7.0開始,內容安全策略擴展被config.csp配置選項取代,該選項可以立即使用:
gantt.config.csp = "auto";
此配置選項使甘特CSP兼容,並同時確保實現可保持組件高速的高性能代碼。
默認情況下,配置設置爲“自動”,因此甘特特公司可以在可能的情況下使用高性能代碼,並在必要時使用兼容CSP的代碼。 但是,根據您的需要,您可以通過指定gantt.config.csp = false來禁用此配置並使Gantt使用高性能的方法,或者將gantt.config.csp設置爲true,以始終應用CSP兼容代碼。
此外,現在DHTMLX Gantt僅使用有效的HTML5數據屬性。
CSP更新使我們的JS Gantt圖表(尤其是Salesforce Lightning)更加方便地工作。