Gridstack - 添加带有内容的新小部件

Question

所以，我一直在使用 Gridstack，想知道是否有关于如何将内容添加到新添加的小部件的指南。

我已经测试了在按钮单击时添加小部件的示例。 [Knockout.js 演示][1] [1]: http://troolee.github.io/gridstack.js/demo/knockout.html效果很好，但我想做的是添加多个按钮，每个按钮添加一个具有单独内容的新小部件。内容只是其他 JS 的 DIV ID。

谢谢

Answer 1

这里有两个按钮，用于使用 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);
            });