项目管理工具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"}
          ]
        },
        {resizer: true, width: 1},
        {
          // a custom layout
          cols: [
            {view: "grid", id: "resourceGrid", bind:"resource", 
                config:resourceGridConfig, scrollY:"resourceVScroll"},
            {resizer: true, width: 1},
            {view:"timeline", id:"resourceTimeline", scrollX:"scrollHor", 
                bind:"resource", bindLinks: null, layers: resourceLayers, 
                scrollY:"resourceVScroll"},
            {view: "scrollbar", id:"resourceVScroll"}
          ]
        },
        {view: "scrollbar", id:"scrollHor"}
    ]
};

在上面的示例中，添加了一个额外的网格视图。它包含资源列表及其工作量。还有一个额外的 时间线视图，显示当月的工作时间分布，并指示标准和加班时间。

自定义网格和时间线的属性

自定义网格和时间线具有其他属性：

对于网格和时间线视图

• bind - ( string ) 设置数据存储的id以从（示例中的“resource”）获取数据

对于时间线视图

• bindLinks - ( string ) 指向链接的来源。null，如果没有相关链接；
• layers - ( array ) 一个配置选项，定义为一组 addLayer() 函数，描述了数据样式的方式。

为自定义视图添加数据存储

要使用相应数据填充自定义视图，您需要添加单独的数据存储。要创建新的数据存储，请使用方法createDatastore并指定数据存储的配置：

var resourcesStore = gantt.createDatastore({
    name:"resource",
    initItem: function(item){
        item.id = item.key || gantt.uid();
        return item;
    }
});

在上面的示例中，添加了一个名为“resource”的数据存储。
要将数据从数据存储区加载到自定义视图中，请使用parse方法：

resourcesStore.parse([// resources
    {key:'0', label: "N/A"},
    {key:'1', label: "John"},
    {key:'2', label: "Mike"},
    {key:'3', label: "Anna"}
]);

要返回必要数据存储的配置对象，请使用getDatastore方法：

var tasksStore = gantt.getDatastore("task");

该方法将数据存储的名称作为参数。

动态禁用/启用调整大小

在某些情况下，您可能需要动态禁用甘特图单元之间的调整大小。最简单的解决方案是通过 CSS 隐藏它们。
为此，您需要如下规则：

.no_resizers .gantt_resizer{
    display:none;
}

然后，您可以通过将类附加到甘特图的容器来隐藏调整大小：

gantt.$container.classList.add("no_resizers");

要再次显示调整大小，只需删除该类：

gantt.$container.classList.remove("no_resizers");