Come posso modificare il numero di colonne in Gridster?

Question

Ho un layout basato sul gridster che inizierà con un numero di colonne impostato e un numero fisso di tessere. C'è un modo per cambiare il numero di colonne una volta che è stato impostato? - ad esempio a partire da 3 colonne:

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

e cambiarlo con un layout a due colonne:

(tile1 | tile2
tile3 | tile4
tile5 | tile6)

La modifica sarà guidata dall'interazione dell'utente.

ho cercato di usare qualcosa come:

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

ma questo non sembra funzionare ...

Ho provato manualmente modificando i valori data-row e data-col alle nuove posizioni, e ha chiesto init() (e non chiamato init).

Ho anche provato a cambiare il codice gridster aggiungendo

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

al metodo fn.generate_grid_and_stylesheet (dopo la linea:

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

).

Posso ottenere le tessere per spostare la posizione corretta utilizzando una di queste opzioni, ma il successivo comportamento di trascinamento è ... dispari.

Ho impostato un jsfiddle (http://jsfiddle.net/qT6qr/) per spiegare cosa intendo (si prega di scusare il gridster.min.js in cima alla cima del manico, non ho trovato un cdn che potrei usare per questo. ..).

Grazie in anticipo

Answer 1

Ho avuto un problema simile e sono riuscito a farlo funzionare con questo approccio:

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

ho appena trascorso un paio di ore e corsero attraverso this piece of code. Ho appena messo in un file .js e fatto:

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

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

gr.resize_widget_dimensions(options); 

E poi appena lavorato.

Ecco il codice:

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