javascript - 如何更改 Gridster 中的列数？

Question

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

(tile1 | tile2 | tile3
tile4 | tile5 | tile6)

并将其更改为两列布局:

(tile1 | tile2
tile3 | tile4
tile5 | tile6)

更改将由用户交互驱动。

我试过使用类似的东西:

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-row 和 data-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;
    }

).

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

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

提前致谢

Answer 1

我只花了几个小时就遇到了 this piece of code .我只是把它放在一个 .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);