這篇文章給大家講解dhtmlxGantt如何進行布局定制。

DhtmlxGantt正版試用下載

布局定制

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

例如，您可以創(chuàng)建額外的網(wǎng)格和時間線視圖，這些視圖將為主甘特圖創(chuàng)建一個底部資源面板。 實施這樣的步驟 自定義布局是：

• 創(chuàng)建多行布局
  
• 將默認網(wǎng)格和時間線添加到布局的第一行
  
• 將額外的網(wǎng)格和時間線添加到下一行并將它們綁定到自定義數(shù)據(jù)源
  
• 在這些行之間添加調(diào)整大小
  
• 將滾動條添加到最后一行并將其綁定到默認時間軸和資源時間軸

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"}
    ]
};

在上面的示例中，添加了一個額外的網(wǎng)格視圖。它包含資源列表及其工作量。還有一個額外的 時間線視圖，顯示當月的工作時間分布，并指示標準和加班時間。

自定義網(wǎng)格和時間線的屬性

自定義網(wǎng)格和時間線具有其他屬性：

對于網(wǎng)格和時間線視圖

• bind - ( string ) 設置數(shù)據(jù)存儲的id以從（示例中的“resource”）獲取數(shù)據(jù)

對于時間線視圖

• bindLinks - ( string ) 指向鏈接的來源。null，如果沒有相關(guān)鏈接；
• layers - ( array ) 一個配置選項，定義為一組 addLayer() 函數(shù)，描述了數(shù)據(jù)樣式的方式。

為自定義視圖添加數(shù)據(jù)存儲

要使用相應數(shù)據(jù)填充自定義視圖，您需要添加單獨的數(shù)據(jù)存儲。要創(chuàng)建新的數(shù)據(jù)存儲，請使用方法createDatastore并指定數(shù)據(jù)存儲的配置：

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

在上面的示例中，添加了一個名為“resource”的數(shù)據(jù)存儲。
要將數(shù)據(jù)從數(shù)據(jù)存儲區(qū)加載到自定義視圖中，請使用parse方法：

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

要返回必要數(shù)據(jù)存儲的配置對象，請使用getDatastore方法：

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

該方法將數(shù)據(jù)存儲的名稱作為參數(shù)。

動態(tài)禁用/啟用調(diào)整大小

在某些情況下，您可能需要動態(tài)禁用甘特圖單元之間的調(diào)整大小。最簡單的解決方案是通過 CSS 隱藏它們。
為此，您需要如下規(guī)則：

.no_resizers .gantt_resizer{
    display:none;
}

然后，您可以通過將類附加到甘特圖的容器來隱藏調(diào)整大小：

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

要再次顯示調(diào)整大小，只需刪除該類：

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

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

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

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