javascript - 修改默认函数返回一对额外的键值对

Question

我正在使用 Gridster对于网页。我想获取一个 json 变量，它表示小部件位置和上面的 html 内容。默认 Serialize函数返回一个 json，但它不返回小部件上的 html 内容。我怎样才能改变原来的功能

库中默认的序列化函数如下:

/**
     * 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
                    };

我只是想要这样的东西可能是

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

我只是不确定如何从

中提取 html 内容

<textarea>

默认的JSON格式

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

我想要的 JSON 应该是某种形式的东西

[{"col":1,"row":1,"size_x":2,"size_y":2,"html":"Some long text,Some long text"},{"col":3,"row":1,"size_x":1,"size_y":2, "html":"Some long text,Some long text"},{"col":4,"row":1,"size_x":1,"size_y":1,"html":"Some long text,Some long text"}]

基本上在 fiddle 链接中，我想将文本区域的值存储为附加键值对。

"html":"Text from <textarea>"

Fiddle

Answer 1

自己动手吧。没有理由修改 API 来执行此操作。这是解决方案:

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