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