Question

我正在尝试在我的应用程序中实现gridster保存选项。

Gridster resize stop正在为1个小部件工作..我的目标是获取整个布局数据而不是1个单独的小部件。

export default Ember.Component.extend({
    tagname: "",
    setupGridster: function() {
        var self = this;

        Ember.$(".gridster ul").gridster({
            widget_base_dimensions: [359, 232],
            widget_margins: [5, 5],
            helper: 'clone',
            //gridster api ?
            serialize_params: function(w, wgd) {
                return self.serializeWidget(wgd);
            },
            resize: {
                enabled: true,
                max_size: [3, 3],
                min_size: [1, 1],
                stop: function (e, ui, $widget) {
                    self.sendAction("saveLayout", {
                        data: self.serializeWidget($widget)
                    });
                }
            },
            draggable: {
                stop: function (e, ui, $widget) {
                    self.sendAction("saveLayout", {
                        data: self.serializeWidget($widget)
                    });
                }
            }
        }).data('gridster');
    }.on("didInsertElement")
});

Answer 1

要序列化整个网格而不是仅仅一个窗口小部件，请使用.serialize（）方法而不是.serializeWidget（）。另外，请确保使用：

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

在您的gridster配置对象中。

Answer 2

实际上这里是小提琴：

http://jsfiddle.net/h9f63/60/

希望这会对你有所帮助。

 serialize_params: function(w, wgd) {
            return {
                        col: wgd.col,
                        row: wgd.row,
                        size_x: wgd.size_x,
                        size_y: wgd.size_y
                    };
        },
        resize: {
            enabled: true,
            max_size: [3, 3],
            min_size: [1, 1],
            stop: function (e, ui, $widget) {
                var gridData = gridster.serialize();
                //send data from this variable to your function
                console.log(gridData)
            }
        },
        draggable: {
            stop: function (e, ui, $widget) {
                var gridData = gridster.serialize();
                //send data from this variable to your function
                 console.log(gridData)
            }
        }

Gridster停止：获取新的画布布局而不是1个小部件

2 个答案: