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

點擊下載dhtmlxGantt試用版

讓我們在視頻教程的幫助下繼續(xù)學(xué)習(xí)我們的JavaScript Gantt庫的所有有價值的可能性。

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

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

水平滾動

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

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"}
    ]
};

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

• 網(wǎng)格
• 時間表
• 網(wǎng)格和時間線之間的調(diào)整大小元素
• 和垂直滾動條

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

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

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

隱藏網(wǎng)格中的列

解決原始挑戰(zhàn)的另一種方法是為用戶提供選擇哪些列應(yīng)可見的功能：

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

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

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可以集成到生產(chǎn)計劃排程APS系統(tǒng)中，可視化生產(chǎn)過程中的所有數(shù)據(jù)，并且實現(xiàn)滾動排程，讓您的生產(chǎn)計劃智能化排程。慧都APS是慧都科技15年行業(yè)經(jīng)驗以及技術(shù)沉淀之作，通過連接企業(yè)接單、采購、制造、倉儲物流等整個供應(yīng)鏈流程，幫助提升企業(yè)生產(chǎn)效率。

相關(guān)內(nèi)容推薦：

dhtmlxGantt試用下載>>>

APS系統(tǒng)>>>

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

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