从文本捕获更新的内容是JSON变量 [英] Capturing the updated content from text are in JSON variable

问题描述

< pre class =snippet-code-js lang-js prettyprint-override> 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）=> {//抓住网格elements s [idx] .html = $（'textarea'，el）.html（）; //添加html键/值}）; $（'＃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 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 =1data-col =1data-sizex =2data-sizey =2>< textarea class =textareaclass> ABC，DEF< / textarea> < /锂> < li data-row =1data-col =3data-sizex =1data-sizey =2>< textarea class =textareaclass> ABC，Def，DS C< / textarea的>< /锂> < li data-row =1data-col =4data-sizex =1data-sizey =1>< textarea class =textareaclass> ABC，DEF，X yz< / textarea的>< /锂> < li data-row =3data-col =2data-sizex =3data-sizey =1>< textarea class =textareaclass> BAC，ABC，XYZ< / textarea的>< /锂> < / ul>< / div>  

我正在使用为网页 Gridster 。我得到一个json变量，表示小部件的位置和html内容我只要按下序列化。但json没有更新如果我在文本区域写一些新的html内容。它只是采用默认内容（已经在正文中声明的内容）。我希望在按下序列化后立即对JSON中的更新内容进行编码

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

  $（'。js- seralize'）。on（'click'，function（）{
 var s = gridster.serialize（）; 
 $（'。gridster ul li'）。each（（idx，el）=> ; {//抓取网格元素
s [idx] .html = $（'textarea'，el）.html（）; //添加html键/ val ues 
}）; 
 $（'＃log'）。val（JSON.stringify（s））; 
}）
 
}）; 
  

小提琴
在小提琴中，json从小部件1中捕获ABC，DEF但是当我写BAC，ABC，YZX之类的内容时，它不会捕获更新的内容。我想要它可以捕捉它

更新1
请检查这个新的小提琴有38
小提琴

解决方案

看着 gridster的文档，您可以添加 serialize_params 到您的gridster初始化以自定义序列化的功能。

然后您可以添加值字段将序列化为 $ 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，
行：wgd.row，
 size_x：wgd.size_x，
 size_y：wgd.size_y 
} 
} 
}）。数据（ 'gridster'）; 
  

小提琴演示

 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>

I am using Gridster for webpage.I am getting a json variable which represents the widget position and html content on it as soon as I press Serialize.But json does not gets updated if I write some new html content on the text area.It just takes the default content(content already declared in the body).I want the updated content in the JSON to be encoded as soon as i press serialize

The function which generates json variable with html content from textarea

$('.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 In the fiddle the json captures "ABC,DEF" from the widget 1 but when I write something like "BAC,ABC,YZX" it wont capture the updated content.I want it to capture it

Update 1 Please check this new fiddle having 38 Fiddle

解决方案

Looking at gridster's docs, you can add a serialize_params to your gridster initialization to customize what the serialization does.

You can then add a value field that will get serialized as $w.find(':input').val() which retrieves the up-to-date value of the input field within each cell of the grid.

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

这篇关于从文本捕获更新的内容是JSON变量的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！