Как добавить пользовательский атрибут данных для сериализации параметров в Gridster.js? - PullRequest
Новая
       15

Как добавить пользовательский атрибут данных для сериализации параметров в Gridster.js?

0 голосов
/ 17 мая 2018

Я использую Gridster.js с JQuery для разработки контейнера виджетов.Поэтому я хочу использовать свойство serialized_params в Gridster.js для сохранения некоторых других атрибутов (владельца и компании) добавленных виджетов.Я попытался, как показано ниже, но он не видит атрибуты данных, которые я добавил.

Примечание: (атрибуты 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 Ответ

0 голосов
/ 25 октября 2018

Я преодолел это, реализовав свою собственную функцию сериализации. 

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;
}
...