Question

我有一个基于网格的布局，它将以一定数量的列和固定数量的切片开始。有没有办法在设置后更改列数？ - 例如从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）。

我甚至尝试更改添加的网格代码

    // 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/）来解释我的意思（请原谅我在fidddle顶部的gridster.min.js，我找不到一个我可以使用的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);

Answer 2

我遇到了类似的问题，并且能够通过这种方法解决问题：

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

如何更改Gridster中的列数？

2 个答案: