甘特图dhtmlxGantt使用教程：如何管理dhtmlxGantt网格中的列可见性-控件新闻-慧都网

甘特图dhtmlxGantt使用教程：如何管理dhtmlxGantt网格中的列可见性

翻译|使用教程|编辑：莫成敏|2020-05-26 14:20:40.677|阅读 1613 次

概述：在本教程中，我们将深入研究dhtmlxGantt网格中列的可见性。有两种可能的解决方案。我们可以将水平滚动条添加到网格中并使其变薄，或者允许用户选择哪些列将可见。

相关链接：

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表。可满足项目管理应用程序的所有需求，是最完善的甘特图图表库。它允许你创建动态甘特图，并以一个方便的图形化方式可视化项目进度。有了dhtmlxGantt，你可以显示活动之间的依赖关系，显示具有完成百分比阴影的当前任务状态以及组织活动到树结构。

点击下载dhtmlxGantt试用版

让我们在视频教程的帮助下继续学习我们的JavaScript Gantt库的所有有价值的可能性。

在本教程中，我们将深入研究dhtmlxGantt网格中列的可见性。您可能面临的挑战是用户可能希望在网格中显示所有可能的信息，以至于网格可能会占用所有可用空间：

甘特图dhtmlxGantt使用教程：如何管理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元素滚动网格。

我们还需要时间轴元素的水平滚动条，以相同的方式添加。

最后，我们将网格和时间线都连接到相同的垂直滚动条元素，以同步其垂直位置。

甘特图dhtmlxGantt使用教程：如何管理dhtmlxGantt网格中的列可见性

隐藏网格中的列

解决原始挑战的另一种方法是为用户提供选择哪些列应可见的功能：

甘特图dhtmlxGantt使用教程：如何管理dhtmlxGantt网格中的列可见性

为此，添加一个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年行业经验以及技术沉淀之作，通过连接企业接单、采购、制造、仓储物流等整个供应链流程，帮助提升企业生产效率。