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

【问题标题】：Gridstack - Add new widgets with contentGridstack - 添加带有内容的新小部件
【发布时间】：2017-03-06 11:42:35
【问题描述】：

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

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

谢谢

【问题讨论】：

你的链接失效了。

标签： gridstack

【解决方案1】：

假设 grid 是你的 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

【讨论】：

【解决方案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);
            });

【讨论】：

感谢萨拉特。这会添加内容（文本等），但似乎没有通过引用 Div 或 Class 来显示任何 javascript 内容。它们在页面上独立加载，但无法在网格容器中加载。有什么想法吗？
嘿@stutray。您需要将您的 JS 内容引用到 div 或类，就像您在 grid-stack-item-content 中提到的那样。 $('#widget').click(function(){ //define_div(); var el = $.parseHTML("

内容标题

" ); var grids = $('.grid-stack').data('gridstack'); grids.addWidget(el, 4, 0, 4, 4, true); });现在使用您的脚本对 div ID 进行更改

内容标题