彩票走势图

项目管理工具dhtmlxGantt甘特图入门教程(四):如何设置默认布局和滚动条?

翻译|使用教程|编辑:秦林|2022-09-26 11:17:29.200|阅读 272 次

概述:这篇文章给大家带来 dhtmlxGantt的默认布局和滚动条的设置讲解。

# 慧都年终大促·界面/图表报表/文档/IDE等千款热门软控件火热促销中 >>

相关链接:

dhtmlxgantt

这篇文章给大家讲解 dhtmlxGantt的默认布局和滚动条。

DhtmlxGantt正版试用下载

默认布局

布局是通过gantt.config.layout配置选项设置的。布局的默认配置如下:

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

甘特图的布局由视图占据的单元格组成。 主要和辅助甘特图元素由视图 ,它们是:

  • 网格 - 定义甘特图的网格部分。 用于显示任务的预定义主网格具有 id:"grid" ;
  • 时间线 - 定义甘特图的时间线部分。 为显示任务预定义的主时间线具有 id:"timeline" ;
  • resizer - 定义调整大小的行。 要启用调整大小,您需要将 resizer 属性设置为 true 。 仅在 PRO 版中可用
  • 滚动条 - 定义甘特图中使用的滚动条。 网格和时间线视图可以绑定到特定的滚动条。 阅读下面的详细信息。
  • resourceGrid - 资源面板的预配置网格。仅在PRO版中可用。
  • resourceTimeline - 资源面板的预配置时间线。仅在PRO版中可用。

视图配置被指定为具有相应属性的对象。您可以设置自定义配置选项为网格和时间线视图默认选项取自全局gantt.config对象。

滚动条

布局滚动条由“滚动条”视图指定。您可以设置水平和垂直滚动条。

将其绑定到相应的视图scrollX或scrollY属性可以将多个视图绑定到同一个滚动条。为了将视图绑定到滚动条:

  • 设置具有必要滚动方向的滚动条并为其分配 ID
  • 使用滚动条的id作为scrollX/scrollY视图配置对象内

在里面定义一个滚动条colsarray将创建一个垂直滚动条,在rowsarray将制作一个水平滚动条。或者,您可以使用滚动参数显式定义滚动模式:

{ view: "scrollbar", id:"scroller", scroll: "x" } // horizontal

或者:

{ view: "scrollbar", id:"scroller", scroll: "y" } // vertical

让我们将自定义网格和时间线视图绑定到垂直滚动:

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

当您滚动垂直滚动条时,网格和时间线会一起滚动。在默认布局中,网格和时间线视图绑定到水平和垂直滚动。
也可以为Grid视图指定一个单独的水平滚动条。

dhtmlxGantt是用于跨浏览器和跨平台应用程序的功能齐全的Gantt图表,可满足项目管理控件应用程序的所有需求,是最完善的甘特图图表库。了解更多DhtmlxGantt相关内容和资讯,欢迎在线咨询或者私信我获取正版试用版及报价。


甘特图控件交流群:764148812    欢迎进群交流讨论

更多正版甘特图软件下载、购买、授权咨询,请点这里!


标签:

本站文章除注明转载外,均为本站原创或翻译。欢迎任何形式的转载,但请务必注明出处、不得修改原文相关链接,如果存在内容上的异议请邮件反馈至chenjj@pclwef.cn


为你推荐

  • 推荐视频
  • 推荐活动
  • 推荐产品
  • 推荐文章
  • 慧都慧问
扫码咨询


添加微信 立即咨询

电话咨询

客服热线
023-68661681

TOP