javascript - GridStack-设置静态网格

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);

它们似乎都不起作用，我用了这个link用于文档。

他们还提到了一个方法setStatic但没有使用此方法的示例。

Answer 1

根据Gridstack docs如果您想在启动时初始化网格并将其定义为 STATIC(您的第一个方法)，则 staticGrid:true 参数是正确的。

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

如果您实时查看源代码，您将看到一个新的 CSS 类已添加到网格包装 DIV 中；一个名为“grid-stack-static”的类。此类的出现确认参数选项 staticGrid:true 已被接受并执行。

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

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

如果您已经说过“静态”，那么这样做似乎会适得其反。

我已在 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 );