1

gridster ダッシュボードを作成できますが、各 gridster ウィジェット内のデータを取得/管理する方法がわかりません。

例として、メモリ消費量、CPU 使用率、および使用可能なディスク容量をキャプチャするウィジェットがあるとします。私の考えでは、データ属性が割り当てられた 3 つのラベルです。

  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

私が理解しているように、グリッドスターの「ウィジェット」は次のいずれかの任意の要素です。

  • CSS セレクター文字列または HTMLElements の jQuery コレクションであるwidget_selectorオプションによって gridster を初期化する際に選択され、デフォルトで に設定されliます。これが、グリッドが an に基づいている場合は必要ない理由です<ul>。
var MyGrid = $(".gridster ul").gridster({
    widget_selector: 'li',
    widget_margins: [10, 10],
    widget_base_dimensions: [140, 140]
}).data('gridster');

  • 作成されたウィジェットの jQuery ラッパーを返すadd_widgetメソッドによる gridster への初期化後に提供されます。

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

したがって、ダッシュボード アイテムを作成して選択し、gridster の初期化時に渡すか、毎回データとともに 1 つずつ追加することができます。また、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 に答える