Question

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

从库中，默认的序列化功能如下：

# load necessary package
library( htmlTable )
library( leaflet )
library( sf )

# load necessary data 
blahTest <- 
  read_sf(
    dsn = "test.geojson"
    , layer = "OGRGeoJSON"
  )

# map data values to colors
fpal <- colorFactor( palette = "viridis", domain = blahTest$class)

# create map
my.map <-
  leaflet( data = blahTest ) %>%
  addTiles() %>%
  addPolygons( stroke = FALSE
               , smoothFactor = 0.3
               , fillOpacity = 1
               , color = ~fpal( class )
               , popup = paste0(
                 "<b>Class: </b>"
                 , blahTest$class
                 , "<br>"
                 , "<b>Coordinates: </b>"
                 , "<br>"
                 , lapply( 
                     X = blahTest$geometry
                     , FUN = function( i ) 
                       htmlTable( 
                         x = i[[1]]
                         , header = c( "Longitude", "Latitude" )
                       )
                     )
                   ) ) %>%
  addLegend( pal = fpal
             , values = ~class
             , labels = ~class
             , title = "Legend"
             , position = "topright"
             , opacity = 1.0 )
# view map
my.map

# end of script #

serialize_params如下

/**
     * 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: function($w, wgd) {
                    return {
                        col: wgd.col,
                        row: wgd.row,
                        size_x: wgd.size_x,
                        size_y: wgd.size_y
                    };

我只是不确定如何从

中提取html内容

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

默认JSON的格式为

<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}]

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

[{"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

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));
})

修改默认函数以返回一个额外的键值对

1 个答案: