Gridster序列化函数获取动态生成Widget的HTML内容异常问题

我之前在项目里也碰到过一模一样的情况——静态声明的Gridster Widget序列化时能正常带出HTML内容，但动态生成的就不行，其他参数倒是都没问题。咱们来拆解问题根源，再给出具体的解决办法：

问题根源分析 #

静态Widget在页面初始化时就已经存在于DOM结构中，你修改的Serialize函数通过直接读取DOM元素的innerHTML就能拿到内容；但动态生成的Widget是通过Gridster的add_widget方法创建的，这里有两个常见坑：

1. Gridster在添加动态Widget时，可能会对传入的HTML进行DOM包装（比如添加额外的容器层），导致你直接读取的innerHTML不是原始的Widget内容；
2. 动态Widget的HTML内容没有被关联到Gridster的内部数据结构里，序列化时只取了row/col等核心参数，漏掉了HTML。

具体解决方案 #

第一步：修改Serialize函数，优先从自定义数据属性取HTML #

我们可以给每个Widget添加一个自定义的data-widget-html属性，用来存储原始的HTML内容（或者当前的DOM内容，根据你的需求）。修改后的Serialize函数会先尝试读取这个属性，没有的话再回退到读取DOM的innerHTML，兼容静态和动态两种场景：

// 扩展Gridster的序列化方法
$.extend(Gridster.prototype, {
  serialize_with_html: function() {
    return this.$widgets.map(function() {
      const $widget = $(this);
      return {
        row: $widget.data('row'),
        col: $widget.data('col'),
        size_x: $widget.data('size_x'),
        size_y: $widget.data('size_y'),
        // 优先取自定义数据属性，再回退到DOM内容
        html: $widget.data('widget-html') || $widget.html()
      };
    }).get();
  }
});

第二步：动态添加Widget时，同步存储HTML内容 #

在调用add_widget创建动态Widget时，把HTML内容存入data-widget-html属性里，这样序列化时就能直接拿到：

// 示例：动态创建Widget并存储HTML
const dynamicWidgetHtml = `
  <div class="widget-content">
    <h3>动态生成的标题</h3>
    <p>这是动态添加的Widget内容</p>
  </div>
`;

// 添加Widget到Gridster，同时绑定HTML到数据属性
const newWidget = gridster.add_widget(
  // 先把HTML转为jQuery对象，设置data属性后再传入
  $(dynamicWidgetHtml).data('widget-html', dynamicWidgetHtml),
  2, // size_x
  1  // size_y
);

如果你的动态Widget会被用户修改内容（比如输入框、富文本），可以在序列化前更新data-widget-html的值，确保拿到最新内容：

// 序列化前更新动态Widget的HTML数据属性
gridster.$widgets.filter('.dynamic-widget').each(function() {
  $(this).data('widget-html', $(this).html());
});

// 执行序列化
const serializedData = gridster.serialize_with_html();

验证效果 #

现在不管是静态声明的Widget，还是动态添加的，序列化后的JSON都会包含完整的HTML内容，row/col等参数也不受影响。

内容的提问来源于stack exchange，提问作者NewBie