如何使 Gridstack.js 小部件垂直響應？

Question

^_^

我正在使用Gridstack.js開發自己的儀表板。 我的問題是，我希望我的所有小部件都顯示在單個屏幕頁面上，而無需向下滾動。 目前可能的是小部件是水平響應的，也就是說，所有小部件的寬度都會隨着屏幕尺寸的變化而調整。 但是身高不行。 根據我對此的研究，我必須在主 gridstack.js 上更改 2 行代碼。 我做到了，但仍然沒有解決我的問題。

這是我的代碼：

 <script src="https://code.jquery.com/jquery-3.4.1.min.js"></script> <script src="https://cdnjs.cloudflare.com/ajax/libs/jqueryui/1.12.1/jquery-ui.min.js"></script> <script src="https://cdn.jsdelivr.net/npm/gridstack@0.5.2/dist/gridstack.all.js"></script> <link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@0.5.2/dist/gridstack.min.css" /> <div id="gridStackHolder" style="border: 2px solid black; padding: 20px;important:"> <div class="grid-stack" style="background; whitesmoke:important; resize: both; overflow: scroll;"> <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="2" style="background: white;important: border; 1px solid gainsboro:important; border-radius: 5px;important:"> <div class="grid-stack-item-content">my first widget</div> </div> <div class="grid-stack-item" data-gs-x="0" data-gs-y="0" data-gs-width="4" data-gs-height="4"style="background; white.important. border; 1px solid gainsboro !important; border-radius: 5px !important;"> <div class="grid-stack-item-content">another widget!</div> </div> </div> </div> <script type="text/javascript"> $('.grid-stack').gridstack(); </script>

如果你會運行它，嘗試調整容器的大小，你會看到寬度在相應地調整，但高度仍然存在，因此它只在屏幕右側創建了一個滾動條。

提前感謝您，祝您編碼愉快！ ^_^

問候，

牧場

Answer 1

這也讓我摸不着頭腦。 我在我的 .NET Core 5 和 JavaScript 項目中使用 gridstack.js。

我正在使用 CDN 將 gridstack js 庫拉入我的項目中，因此我將下面的鏈接放在我的 web 頁面的 header 中：

<link rel="stylesheet" href="https://cdn.jsdelivr.net/npm/gridstack@4.2.7/dist/gridstack.min.css" />
<script type="text/javascript" src="https://cdn.jsdelivr.net/npm/gridstack@4.2.7/dist/gridstack-h5.js"></script>

我有一個設計器頁面，用戶在其中構建自己的 gridstack 小部件布局，網格容器有一些自定義 css 所以它延伸到頁面底部：

CSS 形成網格容器。 /

.gridContainer {
    position: absolute;
    height: calc(100vh - 245px);
    min-height: calc(100vh - 245px);
    width: 100%;
    min-width: 100%;
    outline: none;
    /*touch-action: none;*/
    background-color: #191919;
    position: relative;
    padding: 0px;
}

容器如下所示：

您會注意到我在網格容器上方有一個中間導航欄，用於配置小部件內容的下拉菜單選項。 上面的 CSS 通過使用整個屏幕高度減去我的 web 頁面上的頁眉/導航欄和頁腳的高度來自動計算/設置容器的高度。 在您的環境中調整 CSS 以適應...

現在對於我的網格布局，我有 12 列，也有相當於 12qty 行的工作。 如果您考慮網格布局，則 12 x 12 網格是最靈活的選項，因為它允許用戶創建以下布局：

1路 2路 3路 4路（四路） 6路 9路 以此類推...

通過將網格單元格高度設置為 % 而不是設置高度來實現等效的行數。 庫的作者自己實際上說使用 % 不起作用，直到我注意到在初始化網格時我們可以輕松解決的特定行為模式之前，它對我也不起作用。

有了上面使用 % 作為單元格高度的要點，當在頁面加載 function 時初始化網格堆棧布局時，這里要做的關鍵是添加一個小部件並將高度設置為 12 個單位。 出於某種原因，這在確認/注冊網格容器的當前高度的庫中做了一些神奇的事情。 渲染第一個小部件后，您可以立即將其刪除並繼續使用不同的高度添加新的小部件，而不會出現渲染問題。

HTML 用於實際的網格容器：

<div class="container-fluid p-0 mt-1" style="">
    <div class="grid-stack gridContainer" id="gridContainer" style="overflow-y: auto">
        <!-- JS inserts gridstack widgets here. -->
    </div>
</div>

Javascript 功能：

window.onload = function () {

    let opts = {
        // see other possible values (best to do in here)
        // Approximate calcs are 100 / 12 rows = 8.3333%
        cellHeight: '8.3333%', 
        //cellHeightThrottle: 200, // Not currently in use...
        margin: '2px',
    }
    grid = GridStack.init(opts);

    // Important Note: Add the first widget so the library registers the container height.
    // Otherwise the drag tool rendering wont work correclty.
    // Once the first widget is added, the same widget can be deleted and the rendering will
    // continue to function correctly.
    var widgetId = getGUIDv4();
    grid.addWidget('<div class="grid-stack-item" id="' + widgetId + '" onmouseup="onMouseUp(this.id)" style="border: 1px solid #495057;"><div class="grid-stack-item-content">Widget</div></div>', { w: 1, h: 12 });
}

在上面的 js function 中需要注意的重點是我將單元格高度設置為 %，這樣可以確保當我們進入全屏模式時，小部件會自動調整到全屏的高度。 （無論如何，小部件寬度都有效）

一旦網格首次加載並呈現第一個小部件，即我們配置為高度為 12 個單位的小部件，即網格容器的全高，用戶可以重新調整該小部件的高度/寬度以適應，然后繼續添加更多小部件以構建他們選擇的布局。

當下一個小部件添加到網格中時，我們使用一個單獨的 function 調用按鈕（在我的情況下，您在網格容器上方的導航欄上看到加號 btn）：

function addWidget() {

    var widgetId = getGUIDv4();
    grid.addWidget('<div class="grid-stack-item" id="' + widgetId + '" onmouseup="onMouseUp(this.id)" style="border: 1px solid #495057;"><div class="grid-stack-item-content">Widget</div></div>', { w: 1, h: 1 });
}

// Function toggles the dashboard canvas layout to full screen mode
function goFullScreen() {

    var container = document.getElementById("gridContainer");
    if (container.requestFullScreen) {
        container.requestFullScreen();
    }
    else if (container.webkitRequestFullScreen) {
        container.webkitRequestFullScreen();
    }
    else if (container.mozRequestFullScreen) {
        container.mozRequestFullScreen();
    }
}

下面的屏幕截圖顯示了我快速繪制 6 路布局的位置：

當我點擊導航欄上的全屏按鈕時，小部件會自動調整大小以填滿全屏：