GridStack

Question

我有一个元素已针对它初始化了 gridstack。

我想保存并重新加载我的页面，我希望网格在加载页面时可用。因此，当我加载页面时，我想重新初始化 gridstack 元素。

问题在于它只是将重复的类添加到元素及其子元素中。

<div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>    
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: none;"></div>    
    <div class="ui-resizable-handle ui-resizable-se ui-icon ui-icon-gripsmall-diagonal-se" style="z-index: 90; display: none;"></div>    
    <div class="ui-resizable-handle ui-resizable-sw" style="z-index: 90; display: none;"></div>

我还向根元素添加了多个类：

class="grid-stack grid-stack-instance-4036 grid-stack-instance-4052"

那么重新初始化网格的最佳方法是什么？

Answer 1

所以这是我对这个问题的解决方案：

var stacks = $(".grid-stack");
stacks.each(function () {
            var grid = $(this).data("gridstack");
            if (typeof grid !== "undefined") {
                  grid.destroy(false);
            }

            //use regex to remove the multiple classnames
            $(this).removeClass(function (index, className) {
                  return (className.match(/(^|\s)grid-stack-instance-\S+/g) || []).join(" ");
            });
            $(this).find(".ui-resizable-handle").remove();
});

GridStack - 重新初始化现有网格

GridStack - re-initialise existing grids