5

我有一个基于 gridster 的布局，它将从一组列数和固定数量的图块开始。有没有办法在设置后更改列数？-- 例如从 3 列开始：

（瓷砖 1 | 瓷砖 2 | 瓷砖 3
瓷砖 4 | 瓷砖 5 | 瓷砖 6）

并将其更改为两列布局：

（瓷砖 1 | 瓷砖
2 瓷砖 3 | 瓷砖 4
瓷砖 5 | 瓷砖 6）

这种变化将由用户交互驱动。

我试图使用类似的东西：

gridster = $("#gridster-container").gridster({
   widget_margins: [30, 30],
   widget_base_dimensions : [ 200, 170 ],
   max_cols:numberOfColumns,
   avoid_overlapped_widgets: true
}).data('gridster');

// user interaction

gridster.options.max_rows = 2;

gridster.init();

但这似乎不起作用...

我尝试手动将data-rowanddata-col值更改为新位置，并调用 init() （而不是调用 init）。

我什至尝试更改添加的 gridster 代码

    // HACK
    if (max_cols && max_cols < this.cols) {
        this.cols = max_cols;
    }

到方法fn.generate_grid_and_stylesheet（就在该行之后：

    if (max_cols && max_cols >= min_cols && max_cols < this.cols) {
        this.cols = max_cols;
    }

）。

我可以使用这些选项中的任何一个让瓷砖移动正确的位置，但随后的拖动行为是......奇怪。

我已经设置了一个 jsfiddle ( http://jsfiddle.net/qT6qr/ ) 来解释我的意思（请原谅在小提琴顶部的 gridster.min.js，我找不到我的 cdn可以使用它...）。

提前致谢

4

2 回答 2

4

我只花了几个小时就遇到了这段代码。我只是把它放在一个 .js 文件中并做了：

var gr = $(elem).gridster(options).data('gridster');

// update options and then call this at a later point:

gr.resize_widget_dimensions(options);

然后它就起作用了。

这是代码：

(function($) {
    $.Gridster.generate_stylesheet = function(opts) {
        var styles = '';
        var max_size_x = this.options.max_size_x;
        var max_rows = 0;
        var max_cols = 0;
        var i;
        var rules;

        opts || (opts = {});
        opts.cols || (opts.cols = this.cols);
        opts.rows || (opts.rows = this.rows);
        opts.namespace || (opts.namespace = this.options.namespace);
        opts.widget_base_dimensions || (opts.widget_base_dimensions = this.options.widget_base_dimensions);
        opts.widget_margins || (opts.widget_margins = this.options.widget_margins);
        opts.min_widget_width = (opts.widget_margins[0] * 2) +
            opts.widget_base_dimensions[0];
        opts.min_widget_height = (opts.widget_margins[1] * 2) +
            opts.widget_base_dimensions[1];


        /* generate CSS styles for cols */
        for (i = opts.cols; i >= 0; i--) {
            styles += (opts.namespace + ' [data-col="'+ (i + 1) + '"] { left:' +
                ((i * opts.widget_base_dimensions[0]) +
                (i * opts.widget_margins[0]) +
                ((i + 1) * opts.widget_margins[0])) + 'px;} ');
        }

        /* generate CSS styles for rows */
        for (i = opts.rows; i >= 0; i--) {
            styles += (opts.namespace + ' [data-row="' + (i + 1) + '"] { top:' +
                ((i * opts.widget_base_dimensions[1]) +
                (i * opts.widget_margins[1]) +
                ((i + 1) * opts.widget_margins[1]) ) + 'px;} ');
        }

        for (var y = 1; y <= opts.rows; y++) {
            styles += (opts.namespace + ' [data-sizey="' + y + '"] { height:' +
                (y * opts.widget_base_dimensions[1] +
                (y - 1) * (opts.widget_margins[1] * 2)) + 'px;}');
        }

        for (var x = 1; x <= max_size_x; x++) {
            styles += (opts.namespace + ' [data-sizex="' + x + '"] { width:' +
                (x * opts.widget_base_dimensions[0] +
                (x - 1) * (opts.widget_margins[0] * 2)) + 'px;}');
        }

        return this.add_style_tag(styles);
    };

    $.Gridster.add_style_tag = function(css) {
        var d = document;
        var tag = d.createElement('style');

        tag.setAttribute('generated-from', 'gridster');

        d.getElementsByTagName('head')[0].appendChild(tag);
        tag.setAttribute('type', 'text/css');

        if (tag.styleSheet) {
            tag.styleSheet.cssText = css;
        } else {
            tag.appendChild(document.createTextNode(css));
        }
        return this;
    };

    $.Gridster.resize_widget_dimensions = function(options) {
        if (options.widget_margins) {
            this.options.widget_margins = options.widget_margins;
        }

        if (options.widget_base_dimensions) {
             this.options.widget_base_dimensions = options.widget_base_dimensions;
        }

        this.min_widget_width  = (this.options.widget_margins[0] * 2) + this.options.widget_base_dimensions[0];
        this.min_widget_height = (this.options.widget_margins[1] * 2) + this.options.widget_base_dimensions[1];

        var serializedGrid = this.serialize();
        this.$widgets.each($.proxy(function(i, widget) {
            var $widget = $(widget);
            this.resize_widget($widget);
        }, this));

        this.generate_grid_and_stylesheet();
        this.get_widgets_from_DOM();
        this.set_dom_grid_height();

        return false;
    };
})(jQuery);
于 2014-01-06T23:13:15.913 回答
3

我有一个类似的问题，并且能够通过这种方法让它工作：

var gridster = $(".gridster ul").gridster().data('gridster');
gridster.options.min_cols = 5; // Not necessarily required because of the following size changes, but I did it for clarity
gridster.options.widget_base_dimensions = [240, 400];
gridster.options.min_widget_width = 240;

// This section was for existing widgets. Apparently the code for drawing the droppable zones is based on the data stored in the widgets at creation time
for (var i = 0; i < gridster.$widgets.length; i++) {
    gridster.resize_widget($(gridster.$widgets[i]), 1, 1);
}

gridster.generate_grid_and_stylesheet();
于 2013-07-30T13:52:33.640 回答