這篇文章給大家講解dhtmlxGantt如何進(jìn)行布局定制。

DhtmlxGantt正版試用下載

布局定制

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

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

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

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

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

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

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

對(duì)于網(wǎng)格和時(shí)間線視圖

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

對(duì)于時(shí)間線視圖

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

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

要使用相應(yīng)數(shù)據(jù)填充自定義視圖，您需要添加單獨(dú)的數(shù)據(jù)存儲(chǔ)。要?jiǎng)?chuàng)建新的數(shù)據(jù)存儲(chǔ)，請(qǐng)使用方法createDatastore并指定數(shù)據(jù)存儲(chǔ)的配置：

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

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

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

要返回必要數(shù)據(jù)存儲(chǔ)的配置對(duì)象，請(qǐng)使用getDatastore方法：

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

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

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

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

.no_resizers .gantt_resizer{
    display:none;
}

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

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

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

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

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

甘特圖控件交流群：764148812    歡迎進(jìn)群交流討論

更多正版甘特圖軟件下載、購(gòu)買、授權(quán)咨詢，請(qǐng)點(diǎn)這里！