网格堆栈 - 设置静态网格

Question

我正在尝试使网格成为静态的。一点动静都没有。

我试过了：

var options = {
staticGrid: true,
};
$('.grid-stack').gridstack(options);

还有这个

var options = {
setStatic: true,
};
$('.grid-stack').gridstack(options);

而这个

var options = {
staticGrid: true,
};
$('.grid-stack').gridstack(options);
$('.grid-stack').data('gridstack').setStatic(true);

它们似乎都不起作用，我使用此链接进行文档。

他们还提到了一个方法setStatic，但没有usign这个方法的例子。

Answer 1

根据 Gridstack 文档，如果要在启动时初始化网格并将其定义为 STATIC(您的第一种方法(，staticGrid：true参数是正确的。

SetStatic(true( 是一个函数，你可以调用它以编程方式切换此状态。

如果你实时查看源代码，你会看到一个新的CSS类被添加到网格包装器DIV中;一个名为">grid-stack-static"的类。此类的外观确认参数选项staticGrid：true已被接受并执行操作。

但是当我发现自己(使用 v0.30 的库(时，我初始化的网格中的网格小部件仍然是可调整大小和可移动的。在我看来，这表明存在错误。

您可以使用项目属性data-gs-no-resize="yes">和data-gs-no-move="yes">在微件项目级别锁定移动和调整大小。

如果您已经说"静态"，则必须这样做似乎适得其反。

我已经在 Github 上提出了一个问题来查询这种行为。

顺便说一句，有人建议在网格初始化后调用并使用setStatic( true(函数;作为对此错误的临时修复。这是你的第三种方法- 这对我有用。

您的第三种方法与我的方法之间的唯一区别是该函数包装在 document.ready 函数中(为了方便/兼容我的系统，我使用 $=jquery 快捷方式(。

工作：

(function ($) { 
// Shortcut $=jquery
$(document).ready(function () {
// start grid
$(function () {
var options = {
staticGrid:true
};
$('.grid-stack').gridstack(options);
$('.grid-stack').data('gridstack').setStatic( true );
});
// END DOC READY
}); 
// SHORTCUT FIX
})( jQuery );

Answer 2

只需在网格堆栈的父 Grid 元素(已初始化网格堆栈(上设置属性gs-static="true"。

<div class="grid-stack" gs-static="true">
<div class="grid-stack-item">
<div class="grid-stack-item-content">Item 1</div>
</div>
<!-- .. and so on -->
</div