La capture du contenu mis à jour à partir du texte se fait en variable JSON

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.ssortingngify(s)); }) }); 
     

J’utilise Gridster pour la page Web. Je reçois une variable JSON qui représente la position du widget et son contenu html dès que j’appuie sur Serialize. Mais json ne se met pas à jour si j’écris du nouveau contenu html dans la zone de texte prend le contenu par défaut (contenu déjà déclaré dans le corps) .Je veux que le contenu mis à jour dans le JSON soit encodé dès que j’appuie sur Sérialiser

La fonction qui génère une variable JSON avec un contenu HTML à partir de 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.ssortingngify(s)); }) }); 

Violon Dans le violon, le JSON capture “ABC, DEF” à partir du widget 1, mais lorsque j’écris quelque chose comme “BAC, ABC, YZX”, il ne capture pas le contenu mis à jour.Je veux le capturer

Mise à jour 1 S’il vous plaît vérifier ce nouveau violon ayant 38 violon

En examinant les documents de gridster , vous pouvez append un serialize_params à votre initialisation gridster pour personnaliser le fonctionnement de la sérialisation.

Vous pouvez ensuite append un champ de value qui sera sérialisé sous la forme $w.find(':input').val() qui récupère la valeur à jour du champ de saisie dans chaque cellule de la 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'); 

Démo de violon