使用或考慮使用我們的DevExtreme Gantt UI 組件？本文將為大家介紹甘特圖控件的一些新功能，一起來看看吧~

DevExtreme v22.1正式版下載

導(dǎo)出PDF - 官方正式發(fā)布

導(dǎo)出為 PDF（在 v21.1 中作為預(yù)覽版提供）現(xiàn)在是官方發(fā)行版的一部分。

官方技術(shù)團(tuán)隊重新設(shè)計了導(dǎo)出API來與其他DevExtreme組件統(tǒng)一，所有將組件內(nèi)容導(dǎo)出為PDF的方法現(xiàn)在都位于 模塊中。要將甘特圖導(dǎo)出為 PDF 文檔，請調(diào)用此模塊中包含的 方法。

排序任務(wù)

最終用戶現(xiàn)在可以按多列（屬性值）對甘特圖任務(wù)進(jìn)行排序，在多排序模式下使用時，啟用 屬性后，列標(biāo)題可以顯示排序索引。

Angular

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

任務(wù)展開/折疊 API

我們實現(xiàn)了幾種控制任務(wù)擴(kuò)展?fàn)顟B(tài)的新方法：

• / - 展開/折疊所有任務(wù)。
• - 將所有任務(wù)向下擴(kuò)展至指定級別。
• / - 展開/折疊指定的任務(wù)。
• - 展開指定任務(wù)的所有父任務(wù)，但不展開任務(wù)本身。

例如，您可以使用以下代碼在啟動時擴(kuò)展一級任務(wù)：

jQuery

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

自定義時間線日期范圍

DevExtreme Gantt 根據(jù)任務(wù)日期自動計算可用的時間線周期。 在某些情況下，您可能希望將時間段延長到任務(wù)日期之外或?qū)⑵淇s小到特定范圍。 為了解決這些場景，Gantt v21.2 包含 和 屬性。

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

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

此外技術(shù)團(tuán)隊還引入了和方法來以編程方式更改特定資源或依賴項的可見性，甘特圖工具欄現(xiàn)在可以顯示“showResources”和“showDependencies”控件：

React

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

其他API

DevExtreme Gantt在v21.2中還引入了一些其他API集：

• 如果更改是在外部進(jìn)行的，甘特圖無法跟蹤其數(shù)據(jù)源中的更改。 在這種情況下，調(diào)用 refresh() 方法重新加載甘特數(shù)據(jù)。
• 以前，您需要遍歷所有資源才能從任務(wù)中取消分配它們，現(xiàn)在可以通過一個方法調(diào)用來做到這一點。
• / 這些方法放大和縮小甘特圖。
• 此方法打開任務(wù)Task Details對話框，通常當(dāng)用戶雙擊任務(wù)時會出現(xiàn)此對話框。 如果您希望實現(xiàn)自定義操作，可以使用此方法。

DevExtreme | 下載試用

DevExtreme擁有高性能的HTML5 / JavaScript小部件集合，使您可以利用現(xiàn)代Web開發(fā)堆棧（包括React，Angular，ASP.NET Core，jQuery，Knockout等）構(gòu)建交互式的Web應(yīng)用程序。從Angular和Reac，到ASP.NET Core或Vue，DevExtreme包含全面的高性能和響應(yīng)式UI小部件集合，可在傳統(tǒng)Web和下一代移動應(yīng)用程序中使用。 該套件附帶功能齊全的數(shù)據(jù)網(wǎng)格、交互式圖表小部件、數(shù)據(jù)編輯器等。

DevExpress技術(shù)交流群6：600715373      歡迎一起進(jìn)群討論