如何使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>

​

如果要运行它，请尝试调整容器的大小，您可以看到宽度正在相应地调整，但高度仍在调整，因此它只在屏幕的右侧创建一个滚动条。

谢谢您的提前，并愉快的编码！^_^！

致以敬意，

Rancho

Answer 1

这也让我挠头了一段时间。我在我的.NET核心5& JavaScript项目中使用了.NET。

我正在使用CDN将网格堆栈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>

我有一个设计器页面，用户在其中构建自己的网格堆栈小部件布局，网格容器有一些自定义的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列，也有相当于12 too行的数据。如果考虑到网格布局，12x12网格是最灵活的选项，因为它允许用户创建以下布局：

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路布局的地方：

​

​

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

​

​