選択した列を表示できるテーブルにデータを表示しようとしています。twitter-bootstrap は必要なことを実行できると思いますが、ドキュメンテーションがあまりないか、Rails / JSON に慣れていないので簡単にフォローできるコード例が完全ではありません。
http://wenzhixin.net.cn/p/bootstrap-table/docs/examples.html
/weights.json を使用して JSON データにアクセスすると、次のように表示されます。
{
"id": 163,
"weight": "111.0",
"note": "test new",
"user_id": 1,
"created_at": "2015-01-07T01:43:29.000Z",
"updated_at": "2015-01-07T01:43:29.000Z"
}
注意すべきことの 1 つは、私の JSON がきれいに見えないことです。1 行で表示され、読みにくいです。コントローラーで format.json を使用する場合、これを行うことになっていますか? または、上記のように複数行にすることになっていますか？
私のテーブル:
<table data-toggle="table" data-url="weights.json" data-cache="false" data-height="299">
<thead>
<tr>
<th><%= sortable "weight" %></th>
<th><%= sortable "note" %></th>
<th><%= sortable "created_at", "Date" %></th>
<th class="nopadding"></th>
<th class="nopadding"></th>
</tr>
</thead>
</table>
この時点でのドキュメントは、それが機能するように聞こえるだけですか? 他の情報は必要ありませんか？data-url を正しく呼び出していませんか? 完全な URL を使用する必要がありますか?
これを JS 呼び出しで実装し、showColumns および showToggle オプションを実装するにはどうすればよいですか?
ありがとう！
アップデート
わかりました..これでうまくいきました！ただし、インデックスページ/アクションをロードすると..初めてテーブルがロードされません。何かご意見は？テーブルに JSON データをロードするには、ページを更新する必要があります。以下に、すべてのコードを投稿します。
エントリを編集または削除するにはどうすればよいですか? 私は最初に <% link_to %> を .JS ファイルに入れました..しかし、それについて考えた後..それは JS 内では機能しません。
では、ボタンから編集または削除を送信するにはどうすればよいでしょうか。
(参考までに、足場を再生成したので、トップの投稿と比較して新しいフィールドがあります)
アプリケーション.js:
function operateFormatter(value, row, index) {
return
[ '<a class="edit ml10 btn btn-default" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-pencil"></i>',
'</a>'
].join('');
}
function operateFormatter2(value, row, index) {
return [
'<a class="remove ml10 btn btn-default" href="javascript:void(0)" title="Delete">',
'<i class="glyphicon glyphicon-trash"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .edit': function (e, value, row, index) {
alert('You click edit icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('You click remove icon, row: ' + JSON.stringify(row));
console.log(value, row, index);
}
};
index.html.erb:
<div id="custom-toolbar">
<%= link_to new_weight_tracker_path, :class => "btn btn-default", :remote => true, "data-toggle" => "modal", "data-target" => "#addMeasurement", 'aria-label' => "Add New Measurement" do %><span class="glyphicon glyphicon-plus"></span><% end %>
</div>
<table id="table-pagination" data-toggle="table" data-url="/weight_trackers.json" data-click-to-select="true" data-toolbar="#custom-toolbar" data-show-refresh="true" data-show-toggle="true" data-show-columns="true" data-search="true" data-select-item-name="toolbar1" data-height="600" data-pagination="true" data-sort-name="created_at" data-show-export="true" data-sort-order="desc" data-export-types="['json', 'xml', 'csv', 'txt', 'excel']" >
<thead>
<tr>
<th data-field="weight" data-sortable="true" data-align="right">Weight:</th>
<th data-field="waist" data-sortable="true" data-visible="false" data-align="right">Waist:</th>
<th data-field="wrist" data-sortable="true" data-visible="false" data-align="right">Wrist:</th>
<th data-field="hip" data-sortable="true" data-visible="false" data-align="right">Hip:</th>
<th data-field="forearm" data-sortable="true" data-visible="false" data-align="right">Forearm:</th>
<th data-field="note" data-sortable="true" data-visible="false" data-align="left">Note:</th>
<th data-field="created_at" data-sortable="true" data-align="right">Date:</th>
<th class="nopadding" data-field="operate" data-formatter="operateFormatter" data-events="operateEvents" data-align="center" data-valign="center" data-halign="center"></th>
<th class="nopadding" data-field="operate" data-formatter="operateFormatter2" data-events="operateEvents" data-align="center" data-valign="center" data-halign="center"></th>
</tr>
</thead>
</table>
weight_trackers_controller.rb:
def index
@weight_trackers = WeightTracker.where(user_id: current_user.id)
@weight_tracker = WeightTracker.new
respond_to do |format|
format.html
format.json { render json: @weight_trackers }
format.xml { render :xml => @weight_trackers.to_xml }
end
end
def new
@weight_tracker = WeightTracker.new
respond_with(@weight_tracker)
end
繰り返しになりますが、私の質問は..列の編集/削除、編集メソッド/ページの呼び出し、または削除オプションのボタンを作成するにはどうすればよいですか。
更新 2
編集と削除が機能しています！以下の application.js コードを参照してください。
function operateFormatter(value, row, index) {
return [
'<a class="edit ml10 btn btn-default" href="javascript:void(0)" title="Edit">',
'<i class="glyphicon glyphicon-pencil"></i>',
'</a>'
].join('');
}
function operateFormatter2(value, row, index) {
return [
'<a class="remove ml10 btn btn-default" data-method="delete" href="/weight_trackers/' + row.id + '" title="Delete">',
'<i class="glyphicon glyphicon-trash"></i>',
'</a>'
].join('');
}
window.operateEvents = {
'click .edit': function (e, value, row, index) {
document.location.href='/weight_trackers/' + row.id + '/edit'
console.log(value, row, index);
},
'click .remove': function (e, value, row, index) {
alert('Are you sure you want to delete entry for ' + row.created_at);
document.location.href='/weight_trackers'
console.log(value, row, index);
}
};
これはそれを行います..しかし、編集でモーダルを開くことに取り組む必要があります。
ただし、まだかなり大きな問題が 1 つあります。テーブルは、最初のページを開いたときに読み込まれません。ページをリロード/F5することなくJSONデータをロードする方法についてのアイデアはありますか?