项目管理工具dhtmlxGantt甘特图入门教程（四）：如何进行布局定制？

最新推荐文章于 2024-05-11 15:56:02 发布

原创

最新推荐文章于 2024-05-11 15:56:02 发布 · 860 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#gantt #dhtmlxGantt #项目管理工具 #项目管理控件 #甘特图

本文介绍了如何使用dhtmlxGantt进行布局定制，包括创建多行布局、自定义网格和时间线视图，以及添加和绑定数据存储。通过这些步骤，可以创建包含资源面板和工作量分布的甘特图，同时提供了动态禁用/启用调整大小的方法。

这篇文章给大家讲解 dhtmlxGantt如何进行布局定制。

点击获DhtmlxGantt官方正式版

布局定制

您可以使用其他布局视图更改默认布局配置并指定在页面上排列甘特图元素的必要方案。

例如，您可以创建额外的网格和时间线视图，这些视图将为主甘特图创建一个底部资源面板。实施这样的步骤自定义布局是：

创建多行布局
将默认网格和时间线添加到布局的第一行
将额外的网格和时间线添加到下一行并将它们绑定到自定义数据源
在这些行之间添加调整大小
将滚动条添加到最后一行并将其绑定到默认时间轴和资源时间轴

gantt.config.layout = {
    css: "gantt_container",
    rows:[
        {
          // the default layout
          cols: [
            {view: "grid",
                config: mainGridConfig, scrollY:"scrollVer"},
            {resizer: true, width: 1},
            {view: "timeline", 
                scrollX:"scrollHor", scrollY:"scrollVer"},
            {view: "scrollbar", id:"scrollVer"}
          ]
        },