這篇文章給大家講解 dhtmlxGantt的默認(rèn)布局和滾動(dòng)條。

DhtmlxGantt正版試用下載

默認(rèn)布局

布局是通過(guò)gantt.config.layout配置選項(xiàng)設(shè)置的。布局的默認(rèn)配置如下：

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

甘特圖的布局由視圖占據(jù)的單元格組成。 主要和輔助甘特圖元素由視圖 ，它們是：

• 網(wǎng)格 - 定義甘特圖的網(wǎng)格部分。 用于顯示任務(wù)的預(yù)定義主網(wǎng)格具有 id:"grid" ；
  
• 時(shí)間線 - 定義甘特圖的時(shí)間線部分。 為顯示任務(wù)預(yù)定義的主時(shí)間線具有 id:"timeline" ；
  
• resizer - 定義調(diào)整大小的行。 要啟用調(diào)整大小，您需要將 resizer 屬性設(shè)置為 true 。 僅在 PRO 版中可用 ；
  
• 滾動(dòng)條 - 定義甘特圖中使用的滾動(dòng)條。 網(wǎng)格和時(shí)間線視圖可以綁定到特定的滾動(dòng)條。 閱讀下面的詳細(xì)信息。
  
• resourceGrid - 資源面板的預(yù)配置網(wǎng)格。僅在PRO版中可用。
  
• resourceTimeline - 資源面板的預(yù)配置時(shí)間線。僅在PRO版中可用。
  

視圖配置被指定為具有相應(yīng)屬性的對(duì)象。您可以設(shè)置自定義配置選項(xiàng)為網(wǎng)格和時(shí)間線視圖默認(rèn)選項(xiàng)取自全局gantt.config對(duì)象。

滾動(dòng)條

布局滾動(dòng)條由“滾動(dòng)條”視圖指定。您可以設(shè)置水平和垂直滾動(dòng)條。

將其綁定到相應(yīng)的視圖scrollX或scrollY屬性可以將多個(gè)視圖綁定到同一個(gè)滾動(dòng)條。為了將視圖綁定到滾動(dòng)條：

• 設(shè)置具有必要滾動(dòng)方向的滾動(dòng)條并為其分配 ID
  
• 使用滾動(dòng)條的id作為scrollX/scrollY視圖配置對(duì)象內(nèi)
  

 在里面定義一個(gè)滾動(dòng)條colsarray將創(chuàng)建一個(gè)垂直滾動(dòng)條，在rowsarray將制作一個(gè)水平滾動(dòng)條。或者，您可以使用滾動(dòng)參數(shù)顯式定義滾動(dòng)模式：

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

或者：

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

讓我們將自定義網(wǎng)格和時(shí)間線視圖綁定到垂直滾動(dòng)：

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

當(dāng)您滾動(dòng)垂直滾動(dòng)條時(shí)，網(wǎng)格和時(shí)間線會(huì)一起滾動(dòng)。在默認(rèn)布局中，網(wǎng)格和時(shí)間線視圖綁定到水平和垂直滾動(dòng)。
也可以為Grid視圖指定一個(gè)單獨(dú)的水平滾動(dòng)條。

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)這里！