dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表。可滿足項目管理應用程序的所有需求，是最完善的甘特圖圖表庫。它允許你創建動態甘特圖，并以一個方便的圖形化方式可視化項目進度。有了dhtmlxGantt，你可以顯示活動之間的依賴關系，顯示具有完成百分比陰影的當前任務狀態以及組織活動到樹結構。

點擊下載dhtmlxGantt試用版

讓我們在視頻教程的幫助下繼續學習我們的JavaScript Gantt庫的所有有價值的可能性。

在本教程中，我們將深入研究dhtmlxGantt網格中列的可見性。您可能面臨的挑戰是用戶可能希望在網格中顯示所有可能的信息，以至于網格可能會占用所有可用空間：

有兩種可能的解決方案。我們可以將水平滾動條添加到網格中并使其變薄，或者允許用戶選擇哪些列將可見。

水平滾動

讓我們從第一種方法開始。我們可以使用布局配置選項的scrollable屬性使網格可滾動：

gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
        width:400,
        min_width: 300,
        rows:[
            {view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
            {view: "scrollbar", id: "gridScroll", group:"horizontal"}
        ]
        },
        {resizer: true, width: 1},
        { 
        rows:[
            {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
            {view: "scrollbar", id: "scrollHor", group:"horizontal"}
        ]
        },
        {view: "scrollbar", id: "scrollVer"}
    ]
};

我們將甘特圖布局分為幾列：

• 網格
• 時間表
• 網格和時間線之間的調整大小元素
• 和垂直滾動條

為了將內部滾動條添加到grid元素，請將scrollable屬性添加到grid對象，并將其連接到位于同一列中的水平滾動條。之后，我們可以使用scrollbar元素滾動網格。

我們還需要時間軸元素的水平滾動條，以相同的方式添加。

最后，我們將網格和時間線都連接到相同的垂直滾動條元素，以同步其垂直位置。

隱藏網格中的列

解決原始挑戰的另一種方法是為用戶提供選擇哪些列應可見的功能：

為此，添加一個UI元素，用戶可以在其中指定可見列，并在用戶選擇后更改網格的配置。您可以通過從列配置中刪除任何列或通過設置hide：true屬性來隱藏任何列。

既然我們已經知道如何添加一個UI控件，用戶可以在其中選擇列，還可以向Gantt標頭添加一個下拉菜單–我們所需要做的就是為每個定義的列添加輸入。當選擇更改時，我們準備一個選定列的數組：

function createColumnsConfig(selectedColumns){
    var newColumns = [];

    allColumns.forEach(function(column){
        if(selectedColumns[column.name]){
            newColumns.push(column);
        }
    });

    newColumns.push(controlsColumn);
    return newColumns;
}

將其分配給config列并重新繪制甘特圖：

dropDown.onchange = function(){
    var selection = getColumnsSelection(dropDown);
    gantt.config.columns = createColumnsConfig(selection);
    gantt.render();
}

dhtmlxGantt可以集成到生產計劃排程APS系統中，可視化生產過程中的所有數據，并且實現滾動排程，讓您的生產計劃智能化排程。慧都APS是慧都科技15年行業經驗以及技術沉淀之作，通過連接企業接單、采購、制造、倉儲物流等整個供應鏈流程，幫助提升企業生產效率。

相關內容推薦：

dhtmlxGantt試用下載>>>

APS系統>>>

甘特圖dhtmlxGantt使用教程：如何在Vue.js框架中使用dhtmlxGantt（上）

甘特圖dhtmlxGantt使用教程：如何在Vue.js框架中使用dhtmlxGantt（下）