Question

我可以创建gridster仪表板，但我不明白如何在每个gridster小部件中获取/管理数据。

举个例子：假设我有一个小部件，我想捕获内存消耗，CPU利用率和可用磁盘空间。在我看来，这是三个分配了数据属性的标签。

如何获取gridster小部件中的标签？
如何绑定值/更新值/

我认为需要将html文件与每个小部件相关联。我无法弄清楚如何做到这一点，或者这是否正确。在我的layout.html.erb我使用以下内容进行布局：

<div class="gridster"> 
   <ul> 
     <li data-row="1" data-col="1" data-sizex="1" data- sizey="1"></li>
     <li data-row="2" data-col="1" data-sizex="1" data-sizey="1"></li>
 ...
  </ul>
</div>

Answer 1

据我了解，gridster“widget”是一个任意元素：

在widget_selector初始化网格时选择选项，可以是CSS Selector字符串或HTMLElements的jQuery集合，默认为li，这就是为什么如果您的网格基于<ul>：

var MyGrid = $(".gridster ul").gridster({
    widget_selector: 'li',
    widget_margins: [10, 10],
    widget_base_dimensions: [140, 140]
}).data('gridster');

通过add_widget方法初始化到gridster后提供，该方法返回创建的小部件的jQuery包装器：

var newWidget = MyGrid.add_widget = $("<li class='new'>My New Widget</li>");

因此，您可以创建仪表板项目，选择它们，并在gridster初始化时传递它们，或者您可以逐次将它们与您的数据一起添加。你也没必要使用ul / li，我已经将它用于divs，只要你在父容器上初始化gridster并传递一个'widget'元素的jQuery集合它就可以正常工作。

<ul>
    <li id='first' class='dash-widgets'></li>
    <li id='second' class='dash-widgets'></li>
</ul>

$('#first').data({name:'cpu',speed:'1'});
var widgets = $('.dash-widgets');

var MyGrid = $(".gridster ul").gridster({
    widget_selector: widgets,
    widget_margins: [10, 10],
    widget_base_dimensions: [140, 140]
}).data('gridster');

var newWidget = MyGrid.add_widget = $("<li id='new'>My New Widget</li>");
newWidget.data({name:'mem',speed:'-1'});

一个基本的gridster示例请求

1 个答案: