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

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

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（下）

想要购买dhtmlxGantt正版授权，或了解更多产品信息请点击【咨询在线客服】

标签：