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

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

小董讲MES

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

阅读量607

点赞数

分类专栏：项目管理工具dhtmlxGantt中文教程内容文章标签： gantt dhtmlxGantt 项目管理工具项目管理控件甘特图

本文链接：https://blog.csdn.net/HD202202/article/details/127083396

版权

这篇文章给大家讲解 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"},