Gridstack - Neue Widgets mit Inhalt hinzufügen

Question

Also habe ich mit Gridstack gespielt und mich gefragt, ob es eine Anleitung zum Hinzufügen von Inhalt zu einem neu hinzugefügten Widget gibt.

Ich habe das Beispiel getestet, das ein Widget auf Knopfdruck hinzufügt. [Knockout.js demo] [1] [1]: http://troolee.github.io/gridstack.js/demo/knockout.html das funktioniert gut, aber was ich tun möchte, ist mehrere Schaltflächen hinzufügen jeweils ein neues Widget mit separaten Inhalten hinzufügen. Der Inhalt ist nur eine DIV ID zu einem anderen JS.

Dank

Answer 1

dass Gitter Angenommen Ihr gridstack Variable:

grid.add_widget(jQuery('<div class="grid-stack-item"><div class="grid-stack-item-content">' + node.content + '</div></div>'), node.x, node.y, node.width, node.height); 

Antwort hier: how-to-build-grid-from-gridstack-with-saved-html

Answer 2

Hier sind zwei Buttons zwei verschiedene div Inhalt gridstack mit hinzuzufügen.

<button class="btn btn-default" id="first_widget" value="FirstWidget" href="#">First Widget</button> 
<button class="btn btn-default" id="second_widget" value="SecondWidget" href="#">Second Widget</button> 

In Skript initialisieren auf diese Weise:

$('#first_widget').click(function(){ 
       var el = $.parseHTML("<div><div class=\"grid-stack-item-content\"/> First Widget Content <div/>"); 
       var grids = $('.grid-stack').data('gridstack'); 
       grids.add_widget(el, 1, 1, 4, 1, true); 
      }); 

    $('#second_widget').click(function(){ 
       var el = $.parseHTML("<div><div class=\"grid-stack-item-content\"/> Second Widget Content/Charts <div/>"); 
       var grids = $('.grid-stack').data('gridstack'); 
       grids.add_widget(el, 1, 1, 4, 1, true); 
      });