這篇文章給大家講解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");

dhtmlxGantt是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理控件應用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關內容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

甘特圖控件交流群：764148812    歡迎進群交流討論

更多正版甘特圖軟件下載、購買、授權咨詢，請點這里！