所以,我一直在玩Gridstack,并想知道是否有关于如何向新添加的小部件添加内容的指南。
我测试了在按钮点击时添加小部件的示例。 [Knockout.js演示] [1] [1]:http://troolee.github.io/gridstack.js/demo/knockout.html工作正常,但我想要做的是添加多个按钮,每个按钮添加一个具有单独内容的新窗口小部件。内容只是其他JS的DIV ID。
由于
答案 0 :(得分:3)
以下是使用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);
});
答案 1 :(得分: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 );