使用或考慮使用DevExtreme Gantt UI元件？在DevExtreme最新的v21.2版本中，附帶了許多有關甘特圖控制元件的匯出PDF檔案、任務排序、展開/摺疊等功能，接下來一一為大家詳細介紹。

DevExtreme v21.2正式版下載

匯出為 PDF - 已正式釋出

匯出為 PDF（在 v21.1 中作為預覽版提供）現在是DevExtreme官方發行版的一部分。

官方技術團隊重新設計了匯出API來與其他DevExtreme 元件統一，所有將元件內容匯出為 PDF 的方法現在都位於pdfExporter模組中。 要將甘特圖匯出為 PDF 文件，請呼叫此模組中包含的 exportGantt(options)

排序任務

終端使用者現在可以按多列（ssorting.mode屬性值）對甘特圖任務進行排序。 在多排序模式下使用時，啟用 sorting.showSortIndexes 屬性後，列標題可以顯示排序索引。

Angular

<dx-gantt ... >
<dxo-sorting
mode="multiple"
[showSortIndexes]="true">
</dxo-sorting>
</dx-gantt>

任務展開/摺疊 API

技術團隊實現了幾種控制任務擴充套件狀態的新方法：

• expandAll() / collapseAll()
   - 展開/摺疊所有任務。
• expandAllToLevel(level) - 將所有任務向下擴充套件至指定級別。
• expandTask(key) / collapseTask(key) - 展開/摺疊指定的任務。
• expandToTask(key) - 展開指定任務的所有父任務，但不展開任務本身。

例如，您可以使用以下程式碼在啟動時擴充套件一級任務：

jQuery

$("gantt").dxGantt({
// ...
onContentReady(args){
args.component.collapseAll();
args.component.expandAllToLevel(1);
}
});

自定義時間線日期範圍

DevExtreme Gantt 根據任務日期自動計算可用的時間線週期。 在某些情況下，您可能希望將時間段延長到任務日期之外或將其縮小到特定範圍。 為了解決這些場景，Gantt v21.2 包含startDateRange和endDateRange屬性。

Vue

<template>
<DxGantt ...
:start-date-range="startDateRange"
:end-date-range="endDateRange">
</DxGantt>
</template>
<script>
import {
DxGantt
} from 'devextreme-vue/gantt';
export default {
components: {
DxGantt
},
data() {
return {
// ...
startDateRange: new Date(2018, 11, 1),
endDateRange: new Date(2019, 11, 1),
};
},
};
</script>

圖表外觀自定義 API

以前，甘特圖 API 僅包含一個 showResources 屬性（允許您控制圖表區域中資源的可見性）。 在 v21.2 中，API 還包括一個 showDependencies 屬性（控制依賴項的可見性）。

技術團隊還引入了showResources(value) 和showDependencies(value) 方法來以程式設計方式更改特定資源或依賴項的可見性。 此外，甘特圖工具欄現在可以顯示“showResources”和“showDependencies”控制元件：

React

<Gantt ... >
<Toolbar>
{/* … */}
<Item name="showResources" />
<Item name="showDependencies" />
</Toolbar>
</Gantt>

DevExtreme | 下載試用

DevExtreme擁有高效能的HTML5 / JavaScript小部件集合，使您可以利用現代Web開發堆疊（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構建互動式的Web應用程式。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高效能和響應式UI小部件集合，可在傳統Web和下一代移動應用程式中使用。 該套件附帶功能齊全的資料網格、互動式圖表小部件、資料編輯器等。

DevExpress技術交流群6：600715373      歡迎一起進群討論

更多DevExpress線上公開課、中文教程資訊請上中文網獲取