如何在Gridster.js中为序列化参数添加自定义数据属性？

我看你遇到的问题是自定义的owner和company属性没法在序列化时被正确读取，这主要是两个原因导致的：一是你每次调用addWidget都重新初始化Gridster，会干扰内部状态；二是Gridster的wgd对象默认不包含你自定义的data属性，得从DOM元素里直接读取。

下面是具体的修复步骤和代码：

1. 提前初始化Gridster，避免重复初始化 #

把Gridster的初始化代码移到addWidget函数外面，页面加载完成后只初始化一次，这样能保证Gridster的状态稳定：

// 页面加载完成后初始化Gridster
$(function() {
  $(".gridster ul").gridster({ 
    widget_margins : [ 10, 10 ], 
    widget_base_dimensions : [ 140, 140 ], 
    serialize_params : function($w, wgd) { 
      return { 
        id : $w.attr('id'), 
        col : wgd.col, 
        row : wgd.row, 
        size_x : wgd.size_x, 
        size_y : wgd.size_y, 
        classes : $w.attr('class'), 
        styles : $w.attr('style'), 
        // 直接从DOM元素的data属性读取自定义值
        owner : $w.data('owner'), 
        company : $w.data('company') 
      }; 
    } 
  });
});

2. 修改addWidget函数，正确添加并序列化自定义属性 #

调整addWidget函数，直接获取已初始化的Gridster实例，并且优化widget的HTML结构（把点击事件绑定移到外面，避免重复绑定）：

function addWidget() { 
  // 获取已初始化的Gridster实例
  var gridster = $(".gridster ul").data('gridster'); 
  
  // 构建widget的HTML，注意这里可以不用写data-row/data-col，add_widget会自动处理位置
  var widgetHtml = '<li class="orange" data-owner="omertasci" data-company="XYZ">' + 
    '<i class="fa fa-times"></i>' + 
    '<h1 style="padding-top: 0em ! important;">New Widget</h1>' + 
    '</li>'; 
  
  // 调用add_widget，参数是HTML、size_x、size_y，Gridster会自动分配位置
  gridster.add_widget(widgetHtml, 2, 1); 
  
  // 现在序列化就能拿到自定义属性了
  var serializedGridster = gridster.serialize(); 
  console.log(serializedGridster);
}

// 统一绑定删除事件，不要放在widget的script里
$(function() {
  $(document).on("click", ".fa-times", function() { 
    var indexOfLi = $(this).parent().index(); 
    removeWidget(indexOfLi);
  });
});

为什么之前的代码不行？ #

• 重复初始化Gridster：每次调用addWidget都重新初始化，会覆盖之前的实例状态，导致序列化时无法正确读取最新的widget数据。
• 错误从wgd读取自定义属性：wgd是Gridster内部维护的widget数据对象，只包含它默认跟踪的属性（比如col、row、size_x等），你自定义的data-owner和data-company并没有被自动存入wgd，所以必须从DOM元素$w通过data()方法读取。

现在你再运行代码，序列化结果里应该就能看到owner和company属性了，类似这样：

{
  classes:"orange gs-w", 
  col:5, 
  id:undefined, 
  row:1, 
  size_x:2, 
  size_y:1, 
  styles:"display: list-item; opacity: 0;",
  owner:"omertasci",
  company:"XYZ"
}

内容的提问来源于stack exchange，提问作者ÖMER TAŞCI