从序列化功能获取HTML的价值 [英] Getting the value of HTML from serialize function
问题描述
我在网页上使用 Gridster .我更改了基本的
I am using Gridster for webpage.I altered the basic Serialize function to genearate a json which captures the HTML content of the widgets along with its bascic other parameters(row,col,size_x,size_y).This works fine when the widgets are already declared in the body section of HTML.But when I generate the widgets via JSON the content does not appear in the json obtained from serialize function.All other paramerterds(row,col,size_x,size_y) appear in both cases.
基本序列化功能如下
/**
* Returns a serialized array of the widgets in the grid.
*
* @method serialize
* @param {HTMLElement} [$widgets] The collection of jQuery wrapped
* HTMLElements you want to serialize. If no argument is passed all widgets
* will be serialized.
* @return {Array} Returns an Array of Objects with the data specified in
* the serialize_params option.
*/
fn.serialize = function ($widgets) {
$widgets || ($widgets = this.$widgets);
var result = [];
$widgets.each($.proxy(function (i, widget) {
var $w = $(widget);
if (typeof($w.coords().grid) !== 'undefined') {
result.push(this.options.serialize_params($w, $w.coords().grid));
}
}, this));
return result;
};
serialize_params如下
And serialize_params is as follows
serialize_params: function($w, wgd) {
return {
col: wgd.col,
row: wgd.row,
size_x: wgd.size_x,
size_y: wgd.size_y
};
哪个会生成以下格式的json
Which generates a json of following form
[{"col":1,"row":1,"size_x":2,"size_y":2}}
我的新序列化函数具有以下性质，该函数借助textarea标记捕获值和html，以生成html键值对
My new serialize function is of following nature which captures value and html from textarea tag with help of function to generate html key value pair
新的序列化函数在json中生成值"
New serialize function generates "value" in json
gridster = $(".gridster ul").gridster({
widget_base_dimensions: [100, 100],
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}
},
helper: 'clone',
resize: {
enabled: true
}
}).data('gridster');
生成"HTML"键值对的函数
Function that generates "HTML" key value pair
$('.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));
});
新功能生成以下形式的json
The new function generates json of following form
[{"value":"","col":3,"row":6,"size_x":2,"size_y":2,"html":"Extracted text from textarea"}]
通过JSON生成的窗口小部件，值"键显示为空白.但是，在主体中声明窗口小部件时，该键才存在.
The "value" key appears blank for the widgets generated via JSON.But it is present when widgets are declared in body.
"html"键在两种情况下都出现(当在主体中声明并从json生成时)，但是它是静态的(我的意思是，如果小部件文本区域上的内容实时更改，那么它仍仅显示先前/原始内容，并且不会更新新内容)
The "html" key appears in both cases(when declared in body and generated from json) but it is static(I mean if the content on widgets text area is changed in realtime then it still shows previous/original content only and wont update for new content)
从JSON动态生成窗口小部件时，我也希望更新值"键
I want the "value" key to be updated also when widgets are dynamically generated from JSON
在小提琴中，您可以看到JSON中的值"键仅针对在正文部分中声明的窗口小部件进行了更新/显示(其具有textarea值如果您键入新内容，则将更新") 其余的甚至都没有显示.静态显示的"html"键完美显示.
In the fiddle you can see the "value" key in the JSON is updated/displayed only for widget declared in body section(It has textarea value"This will update if you type something new") .For rest it is not even showing.The "html" key, which is a static, is shown perfect.
推荐答案
提供的网格单元始终包含文本区域，请更改:
Provided your grid cells always contain textareas, change:
$w.find(':input').val()
进入:
$w.find('textarea').val().trim()
(前者也将与您的按钮匹配，这就是为什么.val()调用未返回所需值的原因.)
(The former will also match your button, which is why the .val() call didn't return the value you wanted.)
这篇关于从序列化功能获取HTML的价值的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
