Question

我正在使用Gridster用于网页。我更改了基本的Serialize函数以生成一个json，它捕获小部件的HTML内容及其基本的其他参数（row，col，size_x，size_y当小部件已经在HTML的正文部分中声明时，这很好。但是当我通过JSON生成小部件时，内容不会出现在从序列化函数获得的json中。所有其他参数（row，col，size_x，size_y））出现在两种情况下。

基本序列化功能如下

/**
 * 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如下

serialize_params: function($w, wgd) {
                    return {
                        col: wgd.col,
                        row: wgd.row,
                        size_x: wgd.size_x,
                        size_y: wgd.size_y
                    };

生成以下形式的json

[{"col":1,"row":1,"size_x":2,"size_y":2}}

我的新序列化函数具有以下特性，它借助于函数生成html键值对从textarea标签中捕获值和html

新的序列化函数在json中生成“value”

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”键值对

的函数

    $('.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

 [{"value":"","col":3,"row":6,"size_x":2,"size_y":2,"html":"Extracted text from textarea"}]

对于通过JSON生成的小部件，“value”键显示为空白。但是当在小体中声明小部件时，它会出现。

“html”键出现在两种情况下（当在体内声明并从json生成时）但它是静态的（我的意思是如果小部件文本区域上的内容实时更改，那么它仍然只显示以前/原始内容，不会更新新内容）

我希望在从JSON

动态生成小部件时也更新“value”键

在小提琴中，您可以看到JSON中的“value”键仅针对body部分中声明的小部件进行更新/显示（它具有textarea值“如果您键入新内容，这将更新”）为了休息，它甚至都没有显示。“html”键是静态的，显示得很完美。

Fiddle

Answer 1

如果您的网格单元格始终包含textareas，请更改：

$w.find(':input').val()

成：

$w.find('textarea').val().trim()

（前者也会匹配您的按钮，这就是.val()来电没有返回您想要的价值的原因。）

从序列化函数

1 个答案: