1

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

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

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

我相信每个小部件都需要关联一个 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>
4

1 回答 1

1

据我了解，gridster“小部件”是一个任意元素，可以是：

  • 在通过widget_selector选项初始化 gridster 时 选择，该选项可以是 CSS 选择器字符串或 HTMLElements 的 jQuery 集合，它默认为li，这就是为什么如果您的网格基于 an 则不需要它的原因<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，我已经将它与 div 一起使用，只要您在父容器上初始化 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'});
于 2013-12-15T09:09:35.180 回答