如何添加自定义数据属性以序列化 Gridster.js 中的参数？答案

【问题标题】：How to add custom data attribute to serialize params in Gridster.js?如何添加自定义数据属性以序列化 Gridster.js 中的参数？
【发布时间】：2018-10-27 08:49:27
【问题描述】：

我正在使用带有 JQuery 的 Gridster.js 来设计一个小部件容器。所以我想使用 Gridster.js 的 serialized_params 属性来保存添加的小部件的其他一些属性（所有者和公司）。我尝试如下，但它没有看到我添加的数据属性。

注意：（size_x 和 size_y 属性工作正常。）

请告诉我该怎么做？

function addWidget() {

$(".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'),
            owner : wgd.owner,
            company :wgd.company
        };
    }
});

var gridster = $(".gridster ul").gridster().data('gridster');

var widgetHtml = '<li class= "orange" data-row="2" data-col="6" data-sizex="1" data-sizey="2" data-owner="omertasci" data-company="XYZ">'
        + '<i class="fa fa-times"></i>'
        + '<h1 style="padding-top: 0em ! important;">New Widget</h1>'
        + '<script> '
        + '$(function() { $(".fa-times").on("click", function() { var indexOfLi = $(this).parent().index(); removeWidget(indexOfLi);}   );  });'
        + '</script>' + '</li>';

gridster.add_widget(widgetHtml, 2, 1);
serializedGridster = gridster.serialize();
}

序列化小部件的结果：

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

【问题讨论】：

你能解决这个问题吗？

标签： jquery html widget gridster

【解决方案1】：

我通过实现自己的序列化函数克服了这个问题。

function serializeGridster() {

    var serializeJsonArr = new Array();

    $(".gridster ul li").each(function(i) {

       var serializeJson = {};

       var id = $(this).attr('id');
       var classes = $(this).attr('class');
       var style = $(this).attr('style');
       var owner= $(this).attr('data-owner');
       var company= $(this).attr('data-company');
       var row = $(this).attr('data-row');
       var col = $(this).attr('data-col');
       var sizex = $(this).attr('data-sizex');
       var sizey = $(this).attr('data-sizey');

       serializeJson["id"] = id;
       serializeJson["classes"] = classes;
       serializeJson["style"] = style;
       serializeJson["owner"] = owner;
       serializeJson["company"] = company;
       serializeJson["row"] = row;
       serializeJson["col"] = col;
       serializeJson["sizex"] = sizex;
       serializeJson["sizey"] = sizey;

       serializeJsonArr.push(serializeJson);
   });

  // console.log(serializeJsonArr);
  return serializeJsonArr;
}

【讨论】：

【解决方案2】：

解决方法是jQuerydata()方法：

$(".gridster ul").gridster({
    widget_margins : [ 10, 10 ],
    widget_base_dimensions : [ 140, 140 ],
    serialize_params : function($w, wgd) {
        var data = jQuery.extend({}, $w.data());
        //This will make a _copy_ of *all* data- key-value pairs, including your own.
        delete data.coords;
        //If we don't remove the coords key, we will fall foul of a circular reference
        return data;
        //This will return an array with all the values. The key names will not be formatted.
    }
});

【讨论】：

【解决方案3】：

我有一些问题，我是这样解决的

在li上使用它

<li data-sizey="10" data-sizex="5" data-col="1" data-row="1" id="55" owner="Minhaj" company="google">

你可以在序列化函数中使用它

 serialize_params: function ($w, wgd) {
                var class = $w.attr('class');
                var style = $w.attr('style');
                var owner = $w.attr('owner');
                var company = $w.attr('company');
                return {
                    id: $w.prop('id'),
                    row : wgd.row,
                    size_x : wgd.size_x,
                    size_y : wgd.size_y,
                    classes : class,
                    styles : style,
                    owner : owner,
                    company :company
                };
            },

【讨论】：