GridStack - 重新初始化现有网格

Posted 2023-02-19

【中文标题】GridStack - 重新初始化现有网格

【英文标题】：GridStack - re-initialise existing grids

【发布时间】：2019-12-21 09:22:41

【问题描述】：

我有一个针对它初始化了 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"

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

【参考方案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();
);