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

Posted 2023-05-07

【中文标题】如何添加自定义数据属性以序列化 Gridster.js 中的参数？

【英文标题】：How to add custom data attribute to serialize params in Gridster.js?

【发布时间】：2018-10-27 08:49:27

【问题描述】：

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

注意：（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;"

【问题讨论】：

你能解决这个问题吗？

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