javascript - 如何使 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 库拉入我的项目中，因此我将下面的链接放在我的网页标题中：

<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 自动计算/设置容器的高度，方法是使用整个屏幕高度减去我网页上页眉/导航栏和页脚的高度。调整环境中的 CSS 以适应...

现在对于我的网格布局，我有 12 列，也有相当于 12qty 行的工作。如果您考虑网格布局，则 12 x 12 网格是最灵活的选项，因为它允许用户创建以下布局：

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

通过将网格单元格高度设置为 % 而不是设置高度来实现等效的行数。该库的作者本人实际上说使用 % 不起作用，并且它对我也不起作用，直到我注意到在初始化网格时我们可以轻松解决的特定行为模式。

有了上面使用 % 作为单元格高度的点，在页面加载功能初始化网格堆栈布局时，这里要做的关键是添加一个小部件并将高度设置为 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 函数中需要注意的重要一点是，我将单元格高度设置为 %，这样可以确保当我们进入全屏模式时，小部件会自动调整到全屏的高度。（无论如何，小部件宽度都有效）

一旦网格首次加载并且第一个小部件被渲染，即我们配置为高度为 12 个单位的小部件，即网格容器的全高，用户可以重新调整该小部件的高度/宽度以适应，然后继续添加更多小部件以构建他们选择的布局。

当下一个小部件添加到网格中时，我们使用一个从按钮调用的单独函数（在我的情况下，您在网格容器上方的导航栏上看到加号 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 路布局的位置：

当我点击导航栏上的全屏按钮时，小部件会自动调整大小以填满全屏：