這篇文章給大家講解 dhtmlxGantt的可見(jiàn)性組、布局大小和隱藏父布局視圖。

DhtmlxGantt正版試用下載

可見(jiàn)性組

有時(shí)您需要同步布局中某些元素的可見(jiàn)性。例如，如果相鄰單元格中有水平滾動(dòng)條，您可能希望同時(shí)顯示或隱藏它們。

讓我們考慮另一個(gè)例子。您在時(shí)間線的不同行中有多個(gè)網(wǎng)格，并希望它們具有相同的寬度。如果調(diào)整其中一個(gè)網(wǎng)格的大小，則另一個(gè)應(yīng)匹配其大小。

這兩個(gè)問(wèn)題都可以使用視圖的group屬性來(lái)解決。該屬性取任意字符串值，具有相同組值的視圖將被同步。

• 對(duì)于滾動(dòng)條，這意味著它們的可見(jiàn)性將被同步。 如果該組的至少一個(gè)滾動(dòng)條可見(jiàn)，則該組的所有滾動(dòng)條都將可見(jiàn)。
• 對(duì)于其他單元格，這意味著它們將具有相同的寬度/高度，具體取決于布局。

同步滾動(dòng)條的可見(jiàn)性：

gantt.config.layout = {
  css: "gantt_container",
  cols: [
    {
       width:400,
       min_width: 300,
       rows:[
         {view: "grid", scrollX: "gridScroll", scrollable: true, scrollY: "scrollVer"},
         {view: "scrollbar", id: "gridScroll", group:"horizontal"}            ]
    },
    {resizer: true, width: 1},
    {
      rows:[
        {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
        {view: "scrollbar", id: "scrollHor", group:"horizontal"}            ]
    },
    {view: "scrollbar", id: "scrollVer"}
  ]
};

同步網(wǎng)格的寬度：

gantt.config.layout = {
  css: "gantt_container",
  rows: [
    {
      cols: [
        {view: "grid", group:"grids", scrollY: "scrollVer"},
        {resizer: true, width: 1},
        {view: "timeline", scrollX: "scrollHor", scrollY: "scrollVer"},
        {view: "scrollbar", id: "scrollVer", group:"vertical"}          ],
      gravity:2
    },
    {resizer: true, width: 1},
    {
      config: resourceConfig,
      cols: [
        {view: "resourceGrid", group:"grids", width: 435, scrollY: "resourceVScroll" },
        {resizer: true, width: 1},
        {view: "resourceTimeline", scrollX: "scrollHor", scrollY: "resourceVScroll"},
        {view: "scrollbar", id: "resourceVScroll", group:"vertical"}         ],
      gravity:1
    },
    {view: "scrollbar", id: "scrollHor"}
  ]
};

甘特圖布局部分的大小

來(lái)調(diào)節(jié)甘特圖布局單元格的相對(duì)大小重力屬性該參數(shù)定義了單元格相對(duì)于彼此的大小。

gantt.config.layout = {
  css: "gantt_container",
  rows: [
    {
      cols: [// columns config],
      gravity:2         },
    {resizer: true, width: 1},
    {
      config: resourceConfig,
      cols: [// columns config],
      gravity:1           },
    },
    {view: "scrollbar", id: "scrollHor"}
  ]
};

在上面的示例中，甘特圖和資源圖的大小比例為2:1。這意味著甘特圖將占66%，而資源圖將占 33%。通過(guò)使用1:1的比例，您將擁有兩個(gè)圖表的50%。

隱藏父布局視圖

如果需要在其所有子項(xiàng)不可見(jiàn)時(shí)隱藏一個(gè)布局視圖，請(qǐng)?jiān)谙嚓P(guān)布局單元格的配置中指定 hide_empty:true ，例如：

gantt.config.layout = {
    css: "gantt_container",
    cols: [
        {
            hide_empty: true,             rows:[
                {view: "grid"}
            ]
        },
        {resizer: true},
        {
            hide_empty: true,             rows:[
                {view: "timeline"}
            ]
        }
    ]
};

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

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

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