Gridstack-如果我在重新初始化之前破坏了网格，则稍后会失败

问题描述

代码

注意：此处发布的所有功能都在同一文件interface.js中。

我添加了一个事件侦听器，该事件侦听器在每次窗口调整大小时执行：

window.addEventListener("resize",function(_resize){
        _window_resize_handler(_resize);
    }
);

事件resize发生时，处理器函数_window_resize_handler()确定窗口是否足够宽，确定（a），是否确定（b）在移动/台式机上。基于此，它调用两个Gridstack.js初始化函数之一（（一个用于桌面，一个用于移动）：

function _window_resize_handler(_resize){

    // Screen properties
    let _dpi = window.devicePixelRatio;
    let _sw = screen.width;
    let _sh = screen.height;
    let _ss = _sw + _sh;
    let _ar;
    let _sww;

    // Window properties
    let _ww = window.innerWidth;

    // We calculate the aspect ratio in landscape format - this is the only one we need.
    if (_sw > _sh){
        _ar = _sw / _sh;
    }
    else{
        _ar = _sh / _sw;
    }

    // We set the longer dimension of the two to be screen width.
    if (_sw > _sh){
        _sww = _sw;
    }
    else{
        _sww = _sh;
    }

    // If window width is too narrow we use Gridstack's one-column mode regardless of the device.
    // Otherwise we let screen properties decide.
    if (_ww < 768){
        _gridstack_init_mobile();
    }
    else if( ((_ar < 1.78) && (_dpi < 2.5 ) && (_sww > 768)) || (_ss > 2000)){  
        _gridstack_init_desktop();
    }
    else{
        _gridstack_init_mobile();
    }

}

Gridstack.js初始化函数如下：

对于台式机：

function _gridstack_init_desktop(){

    // Create global object "grid" with window.
    window.grid = GridStack.init({
        acceptWidgets: false,alwaysShowResizeHandle: true,animate: false,auto: true,// cellHeight: "15.45rem",// column: 12,disableDrag: false,disableOneColumnMode: true,disableResize: false,draggable: true,dragOut: false,float: true,handle: '.grid-stack-item-content',handleClass: 'grid-stack-item-content',itemClass: 'grid-stack-item',maxRow: 6,minRow: 6,minWidth: 768,oneColumnDomSort: false,placeholderClass: 'grid-stack-placeholder',placeholderText: '',resizable: {                                
            autoHide: false,handles: 'n,nw,w,sw,s,se,e,ne'
        },removeable: false,removeTimeout: 2000,//row: 6,rtl: false,staticGrid: false,});

    grid.column(12);
    grid.cellHeight("15.45rem");


}

对于移动设备：

function _gridstack_init_mobile(){

    // Create global object "grid" with window.
    window.grid = GridStack.init({
        acceptWidgets: false,disableOneColumnMode: false,maxRow: 72,resizable: {                                  
            autoHide: false,verticalMargin: "0",});

    grid.column(1);
    grid.cellHeight("47.15vh");

}

结果

此部分有效，但仅当我在Chrome开发人员工具内部对所有触发_gridstack_init_mobile()的屏幕进行调整时才有效。这些主要是手机屏幕：

当我选择触发_gridstack_init_desktop()的iPad屏幕在初始化期间出了问题，我得到了1列而不是12列（左图）。但是，如果刷新，一切正常，我会得到12列（右侧图片）：

我的设定

我的猜测是，我需要销毁grid对象（如果存在），然后再将其重新初始化为Gridstack对象。这就是为什么我试图将这部分代码放在_gridstack_init_mobile()和_gridstack_init_mobile()的顶部：

if (document.getElementsByClassName('grid-stack').length != 0){
    grid.destroy();
}

但是我得到一个错误：

interface.js:372 Uncaught ReferenceError: grid is not defined
    at _gridstack_init_desktop (interface.js:372)
    at _window_resize_handler (interface.js:359)
    at interface.js:8

有人知道吗？

解决方法

如果只需要更改列号，为什么还要销毁？（有一个API）。 removeAll(removeDOM = true)会删除网格堆栈信息。即使没有api grid.opts.maxRow=72，您也可以更改任何属性，如果在下一个动作发生之前需要执行更改，则根本不会执行任何代码来更改。

如果库中存在错误，则应创建一个最小的可重现案例并将其发布为错误，而不是期望有人阅读您的堆栈溢出Q ...同样，您也无法说出您正在使用什么版本。尝试2.0.0，乍一看您正在使用12列，但网格最初显示为1列-您也不能多次初始化同一网格，但是可以设置column（1），删除dom元素会破坏所有内容，甚至不显示dom的开头。另外，不要使用世界上所有的选项进行初始化，只有非默认选项（否则很难阅读）。

gridstack javascript