Gridstack - 添加帶有內容的新小部件

Question

因此，我一直在玩Gridstack，想知道是否有指導如何添加內容到新添加的小部件。

我測試了在按鈕單擊時添加小部件的示例。 [Knockout.js演示] [1] [1]：http://troolee.github.io/gridstack.js/demo/knockout.html它工作正常，但我想要做的是添加多個按鈕，每個添加一個新的小部件與單獨的內容。內容只是一些其他JS的DIV ID。

感謝

Answer 1

假設電網是您gridstack變量：這裏找到

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

答：how-to-build-grid-from-gridstack-with-saved-html

Answer 2

這裏有兩個按鈕來添加使用gridstack兩種不同的div內容。

<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> 

在初始化腳本是這樣的：

$('#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); 
      });