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

DhtmlxGantt正版試用下載

可見性組

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

讓我們考慮另一個例子。您在時間線的不同行中有多個網格，并希望它們具有相同的寬度。如果調整其中一個網格的大小，則另一個應匹配其大小。

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

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

同步滾動條的可見性：

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

同步網格的寬度：

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

甘特圖布局部分的大小

來調節甘特圖布局單元格的相對大小重力屬性該參數定義了單元格相對于彼此的大小。

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%。通過使用1:1的比例，您將擁有兩個圖表的50%。

隱藏父布局視圖

如果需要在其所有子項不可見時隱藏一個布局視圖，請在相關布局單元格的配置中指定 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是用于跨瀏覽器和跨平臺應用程序的功能齊全的Gantt圖表，可滿足項目管理控件應用程序的所有需求，是最完善的甘特圖圖表庫。了解更多DhtmlxGantt相關內容和資訊，歡迎在線咨詢或者私信我獲取正版試用版及報價。

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

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