javascript - 从 JSON 变量中的文本捕获更新的内容

Question

 var gridster;

 $(function() {

   gridster = $(".gridster ul").gridster({
     widget_base_dimensions: [100, 55],
     widget_margins: [5, 5]
   }).data('gridster');

   $('.js-seralize').on('click', function() {
     var s = gridster.serialize();
     $('.gridster ul li').each((idx, el) => { // grab the grid elements
       s[idx].html = $('textarea', el).html(); // add the html key/values
     });
     $('#log').val(JSON.stringify(s));
   })

 });

<script src="https://dsmorse.github.io/gridster.js/demos/assets/css/demo.css"></script>

<script src="https://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.css"></script>
 
 <script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/1.7.1/jquery.min.js"></script>
 <script src="https://dsmorse.github.io/gridster.js/dist/jquery.gridster.min.js"></script>

<div class="controls">

  <button class="js-seralize">Serialize</button>
</div>

<textarea id="log"></textarea>

<div class="gridster">
  <ul>
    <li data-row="1" data-col="1" data-sizex="2" data-sizey="2"><textarea class="textareaclass">ABC,DEF</textarea></li>
    <li data-row="1" data-col="3" data-sizex="1" data-sizey="2"><textarea class="textareaclass">ABC,Def ,D S C</textarea></li>
    <li data-row="1" data-col="4" data-sizex="1" data-sizey="1"><textarea class="textareaclass">ABC,DEF,X yz</textarea></li>
    <li data-row="3" data-col="2" data-sizex="3" data-sizey="1"><textarea class="textareaclass">BAC,ABC,XYZ</textarea></li>
  </ul>
</div>

我正在使用Gridster当我按下 Serialize 时，我会得到一个 json 变量，它代表小部件位置和其上的 html 内容但如果我在文本区域写入一些新的 html 内容，则 json 不会更新。它只采用默认内容(正文中已声明的内容)。我希望在按下时立即对 JSON 中的更新内容进行编码序列化

从textarea中生成带有html内容的json变量的函数

$('.js-seralize').on('click', function () {
    var s = gridster.serialize();
    $('.gridster ul li').each((idx, el)=>{ // grab the grid elements
       s[idx].html = $('textarea', el).html(); // add the html key/values
    });
    $('#log').val(JSON.stringify(s));
})

    });

Fiddle在 fiddle 中，json从小部件1捕获“ABC，DEF”，但是当我写“BAC，ABC，YZX”之类的内容时，它不会捕获更新的内容。我希望它捕获它

更新 1请检查这个新 fiddle 有 38 Fiddle

Answer 1

查看gridster's docs ，您可以将 serialize_params 添加到 gridster 初始化中以自定义序列化的功能。

然后，您可以添加一个 value 字段，该字段将被序列化为 $w.find(':input').val() ，用于检索最新的 -网格每个单元格内输入字段的日期值。

gridster = $('.gridster ul').gridster({
  widget_base_dimensions: [100, 55],
  widget_margins: [5, 5],
  serialize_params: function($w, wgd) { 
    return { 
      value: $w.find(':input').val(), 
      col: wgd.col, 
      row: wgd.row, 
      size_x: wgd.size_x, 
      size_y: wgd.size_y 
    } 
  }
}).data('gridster');

Fiddle Demo