如何使 Gridstack.js 小部件垂直响应？

Posted 2023-02-19

【中文标题】如何使 Gridstack.js 小部件垂直响应？

【英文标题】：How to make Gridstack.js widgets vertically responsive?

【发布时间】：2020-03-15 14:15:00

【问题描述】：

^_^

我正在使用Gridstack.js 开发我自己的仪表板。我的问题是，我希望我的所有小部件都在单个屏幕页面上可见，而无需向下滚动。目前可能的是小部件是水平响应的，也就是说，所有小部件的宽度都会随着屏幕尺寸的变化而调整。但是身高不行。根据我对this 的研究，我必须更改主gridstack.js 上的两行代码。我做到了，但仍然没有解决我的问题。

这是我的代码：

<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- data-gs- 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- data-gs-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>

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

提前感谢您，祝您编码愉快！ ^_^

问候，

牧场

【问题讨论】：

我也在寻找同样的东西。你找到解决办法了吗？

【参考方案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 路布局的位置：

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