在gridster中调整大小后获取小部件的尺寸将数据序列化为JSON [英] Get dimension of widgets after resize in gridster serialize data as JSON

问题描述

我正在尝试在更改盒子的大小和位置后序列化JSON数据.但是我仅获得有关负载的详细信息.调整框大小后如何获取序列化数据.而且我还想获​​取框中的文本(框中的值).

I am trying to get serialize JSON data after changing the size and position of boxes. But I get the on load details only. How to get serialize data after resize the boxes. And I also want to get the text(value in the box) of the box.

这是我的代码:

  $(function() {

  var gridster = $(".gridster > ul").gridster({
      widget_margins: [10, 10],
      widget_base_dimensions: [230, 160],
      helper: 'clone',
      resize: {
          enabled: true,

      },
      serialize_params: function($w, wgd) {
          return {
              text: $($w).attr('.drop'),
              col: wgd.col,
              row: wgd.row,
              size_x: wgd.size_x,
              size_y: wgd.size_y
          };
      }

  }).data('gridster');

  //serialization//

  var gridster = $(".gridster > ul").gridster().data('gridster');
  gridData = gridster.serialize();
  /*alert(gridData.toSource())*/

  $('.js-seralize').on('click', function() {
      alert(gridData.toSource());
  });

  //delete//

  $(".del_img").click(function() {
      gridster.remove_widget($(this).parent());
  });
});

请检查此链接

请帮助.

谢谢.

推荐答案

删除此

 serialize_params: function($w, wgd) {
          return {
              text: $($w).attr('.drop'),
              col: wgd.col,
              row: wgd.row,
              size_x: wgd.size_x,
              size_y: wgd.size_y
          };

尝试此操作，然后您将得到所需的内容

And try this then u will get what u required

 $('.js-seralize').on('click', function() {
                   // alert(gridData.toSource())
                   var finalserializer="[";
                   $('.re_boxes').each(function(){
                    var xaxisval = $(this).attr("data-sizex");
                    var yaxisval = $(this).attr("data-sizey");
                    var colval = $(this).attr("data-col");
                    var rowval = $(this).attr("data-row");
                    var coltitle = $(this).find("a").text();
                    var currentfinal = "{'col':"+colval+",'row':"+rowval+",'size_x':"+xaxisval+",'size_y':"+yaxisval+",'text:'"+coltitle+"}";
                    finalserializer = finalserializer+currentfinal;
                   });
                   finalserializer=finalserializer+"]";
                   alert(finalserializer);
                 });

这篇关于在gridster中调整大小后获取小部件的尺寸将数据序列化为JSON的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！