Wie kann ich die Anzahl der Spalten in Gridster ändern?

Question

Ich habe ein Graster-basiertes Layout, das mit einer festgelegten Anzahl von Spalten und einer festen Anzahl von Kacheln beginnt. Gibt es eine Möglichkeit, die Anzahl der Spalten nach der Einrichtung zu ändern? - zum Beispiel mit 3 Spalten Start:

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

und es zu einem zweispaltigen Layout zu ändern:

(tile1 | TILE2
tile3 | tile4
tile5 | tile6)

Die Änderung wird durch Benutzerinteraktion ausgelöst.

Ich habe versucht, wie etwas zu verwenden:

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

aber das scheint nicht ...

ich an die neuen Positionen zu ändern versucht, die data-row und data-col Werte manuell haben zu arbeiten, und rief init() (und nicht init).

Ich habe sogar versucht, den Code zu ändern gridster

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

das Verfahren des Hinzufügen fn.generate_grid_and_stylesheet (unmittelbar nach der Zeile:

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

).

Ich kann die Kacheln die richtige Position mit einer dieser Optionen bewegen, aber das nachfolgende Ziehen Verhalten ist ... ungerade.

Ich habe eine jsfiddle eingerichtet (http://jsfiddle.net/qT6qr/), um zu erklären, was ich meine (bitte entschuldigen Sie die gitter.min.js in der Zeile oben auf der Fidddle, ich konnte nicht finden, eine CDN, die ich dafür verwenden könnte. ..).

Vielen Dank im Voraus

Answer 1

Ich hatte ein ähnliches Problem und konnte es durch diesen Ansatz zum Laufen bringen:

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

Answer 2

Ich habe gerade ein paar Stunden und lief über this piece of code. Ich steckte es einfach in eine .js-Datei und tat:

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

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

gr.resize_widget_dimensions(options); 

Und dann hat es einfach funktioniert.

Hier ist der Code:

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