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正版試用下載

 項(xiàng)目管理應(yīng)用程序中集成 DHTMLX JavaScript 甘特圖組件時(shí)，我們的客戶面臨根據(jù)他們的要求自定義甘特圖。燈箱編輯器是經(jīng)常定制的甘特圖元素之一，以提高處理任務(wù)的效率。使用 Gantt API 可以解決這個(gè)問題，但我們想提供一個(gè)更可行的替代方案。

我們的團(tuán)隊(duì)提供了一個(gè)新的甘特圖演示，其中燈箱編輯器基于 DHTMLX Suite UI 小部件，并為最終用戶提供了額外的編輯選項(xiàng)。在這篇博文中，我們更詳細(xì)地回顧了使用套件小部件構(gòu)建的甘特圖燈箱編輯器。

基于套件小部件的甘特圖燈箱編輯器的新功能

在我們的新演示中，甘特圖燈箱是使用套件庫呈現(xiàn)的。所以很容易將任何套件小部件添加到燈箱。在我們的案例中，我們在甘特圖編輯器中使用了 6 個(gè)不同的 Suite UI 小部件，例如滑塊、窗口、標(biāo)簽欄、表單、網(wǎng)格和布局；

正如您在演示中看到的那樣，燈箱編輯器有四個(gè)單獨(dú)的選項(xiàng)卡，提供用于編輯特定甘特圖功能的各種編輯選項(xiàng)。我們還使用滑塊對演示進(jìn)行了補(bǔ)充，使最終用戶可以更方便地即時(shí)更改甘特圖時(shí)間線的比例。現(xiàn)在讓我們更詳細(xì)地考慮每個(gè)選項(xiàng)卡。

任務(wù)數(shù)據(jù)

第一個(gè)“任務(wù)數(shù)據(jù)”選項(xiàng)卡包括幾乎所有可以在甘特圖的默認(rèn)燈箱中指定的設(shè)置（進(jìn)度滑塊除外）。由于使用了 Suite Form 小部件，我們可以擁有用戶友好的日期選擇器輸入。例如，在“任務(wù)數(shù)據(jù)”選項(xiàng)卡中，您可以看到允許指定以下參數(shù)的表單小部件控件的實(shí)際應(yīng)用：任務(wù)名稱、開始/結(jié)束日期、持續(xù)時(shí)間、描述和任務(wù)優(yōu)先級。

接下來我們開始討論最有趣的部分，即由于使用套件小部件而在此演示中可用的新編輯功能。

鏈接

在第二個(gè)選項(xiàng)卡中，您有機(jī)會操作常規(guī)任務(wù)、里程碑和項(xiàng)目的依賴關(guān)系鏈接。除了創(chuàng)建或刪除鏈接等基本操作外，還可以更改依賴類型，為鏈接選擇相反的方向（從后繼到前任，反之亦然），并設(shè)置與給定鏈接的任務(wù)的滯后時(shí)間依賴。

依賴鏈接可以實(shí)時(shí)編輯，但所有更改將在渲染后或燈箱關(guān)閉時(shí)顯示。添加或刪除鏈接時(shí)，只有點(diǎn)擊“保存”按鈕后，操作才會完成。

日歷

工作時(shí)間日歷是我們甘特圖組件的另一個(gè)重要功能，可以在“日歷”選項(xiàng)卡中進(jìn)行修改。

上方的“分配日歷”部分允許選擇所需的日歷類型。通常，甘特圖項(xiàng)目中的工作時(shí)間可以通過三種類型的日歷進(jìn)行管理：全局日歷（默認(rèn)選項(xiàng)）、全職日歷和自定義日歷。

為任務(wù)選擇所需的日歷類型后，您可以使用同一部分提供的相應(yīng)圖標(biāo)執(zhí)行以下操作：

• 添加日歷
• 克隆日歷（即相同的設(shè)置但不同的名稱）
• 重命名日歷
• 刪除日歷（注意不能刪除全局日歷）

下方的“編輯日歷”部分專用于日歷設(shè)置。在這里，您可以在“日期”列中看到天數(shù)列表，并在相鄰的“小時(shí)數(shù)”列中看到這些天的工作時(shí)間。這兩個(gè)參數(shù)都可以直接在 UI 中修改。使用右側(cè)的“重置時(shí)間”按鈕可以延長全天的工作時(shí)間。沒有指定工作時(shí)間的日子是非工作日。

可以使用“+”按鈕添加自定義日期，然后指定其工作時(shí)間。如果您需要將添加日期的小時(shí)設(shè)置應(yīng)用到另一個(gè)日期，只需在左側(cè)按鈕的幫助下克隆這些設(shè)置。可以通過右側(cè)相應(yīng)的按鈕刪除新添加的日期及其設(shè)置。

所有變化都是實(shí)時(shí)發(fā)生的。如果您決定更改給定任務(wù)的日歷類型，您應(yīng)該單擊保存按鈕以使新日歷顯示在甘特圖中。

資源

最后，我們繼續(xù)探索用于編輯項(xiàng)目資源的最后但也是最值得注意的“資源”選項(xiàng)卡。這個(gè)選項(xiàng)卡就像前一個(gè)選項(xiàng)卡一樣分為兩個(gè)部分。

頂部的“分配資源”部分顯示分配有資源的任務(wù)。在此部分的標(biāo)題中，您可以添加新的資源分配（“+”按鈕）并一次刪除所有分配（“X”按鈕）。對于每個(gè)分配，您可以指定一系列參數(shù)，例如：

• 名稱——為給定任務(wù)選擇的資源的名稱
• 價(jià)值——在指定時(shí)間內(nèi)要使用的分配資源的價(jià)值
• Mode – 分配給資源使用的時(shí)間的計(jì)算模式
• 開始——應(yīng)用此資源的開始日期
• 結(jié)束——應(yīng)用此資源的結(jié)束日期
• 延遲——分配開始日期與任務(wù)實(shí)際開始時(shí)間之間的時(shí)間間隔

默認(rèn)情況下，分配資源以從任務(wù)開始到結(jié)束使用。當(dāng)您重新安排任務(wù)或更改其持續(xù)時(shí)間時(shí)，資源分配將相應(yīng)更改。但是模式參數(shù)可以幫助您設(shè)置資源使用限制。此參數(shù)包括兩種附加模式 – fixedDuration和fixedDates。使用fixedDuration模式，資源將在特定時(shí)間段內(nèi)可用于給定任務(wù)，即使您更改任務(wù)持續(xù)時(shí)間也是如此。fixedDates模式將資源分配嚴(yán)格綁定到某些日期，即使您重新安排任務(wù)也不會更改。

可以在文檔中找到有關(guān)設(shè)置資源分配時(shí)間的更多信息。

 顧名思義，“編輯資源”部分提供了許多編輯資源的機(jī)會。除了對資源的標(biāo)準(zhǔn)操作（添加、克隆、刪除）之外，還有一些更特殊的設(shè)置。例如，您可以使用“部門”選項(xiàng)將資源分組。

隱藏選項(xiàng)有助于從資源面板中隱藏特定資源。單位是一個(gè)自定義字段，最終用戶可以在其中做任何與資源相關(guān)的注釋。

此外，可以更改相應(yīng)列中資源的日歷。特定資源的日歷適用于分配給該資源的所有任務(wù)。但是由于只能將一個(gè)日歷分配給一項(xiàng)任務(wù)，因此存在一些優(yōu)先級規(guī)則。僅當(dāng)在“日歷”選項(xiàng)卡中為此任務(wù)設(shè)置了全局日歷時(shí)，資源日歷才會應(yīng)用于所選任務(wù)。其他類型的日歷具有更高的優(yōu)先級并覆蓋資源日歷設(shè)置。

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

甘特圖控件交流群：764148812   

歡迎進(jìn)群交流討論，獲取更多幫助請聯(lián)系