Railsで使えるGem

Railsのテーブル並び替えを実装する

投稿日:

 

 

環境 RailsにTwitter Bootstrapを設定する~twitter-bootstrap-rails

参考 #147 Sortable Lists (revised) @Railscasts

 

並び替えは次のメソッドで実行する

昇順がasc、降順がdesc

やること

  • テーブルのカラム名をクリックすると上矢印が現れて昇順に並び替える
  • もう一度同じカラム名をクリックすると下矢印に変わって降順に並び替える
  • 違うカラム名をクリックすると上矢印が現れて昇順に並び替える、前の矢印は消える

仕組み

  1. リンクを作成して:sortにカラム名を投げてindexを呼びなおす
  2. その際、もし前と同じカラム名なら方向をトグルする(ascならdesc、descならasc)
  3. もし前と違うカラム名なら方向はascにする
  4. モデル名.order(カラム名+’ ‘+昇順・降順)で指定した順序でデータを呼び出す
  5. カラム名がついているテーブルヘッドの値の後ろに昇順なら上矢印・降順なら下矢印をつける

コーディング

View

<th>のうちソートをしたいタイトルにリンクを作成して:sortにカラム名を投げてindexを呼びなおす

model_class.human_attribute_name はtwitter-bootstrap-railsがgenerateしたもの 普通に:nameでもOK

ソートさせたいカラムの分だけ作成する

Controller

View

ブートストラップで上矢印アイコンは次のとおり

選択されたカラム名(@sort)の後ろに、指定された方向(@direction)にしたがって矢印アイコンを出す

 

テスト作成とHelper化のリファクタリングは後日

-Railsで使えるGem
-,

執筆者:

関連記事

Rubyでd3.jsのapiリファレンスの一覧を取得してくる~mechanize

  d3.jsにはlayoutというおおまかに準備されたレイアウトがあって、その中にあるTreeレイアウトを試してみることにした d3.js自身のapiリファレンスが階層構造になっているので …

no image

Rubyでxmlの要素の追加など~nokogiri

目次1 はじめに2 文字列をパースしてxmlとして読み込んでそのままxmlとして出力する3 nodeの追加4 nodesetの作成と追加5 DocumentFragmentの作成と追加 はじめに 参考 …

FullCalendarのagendaViewでselectの場所がずれる問題

  By: Ben Piddington 前回 Rails3.2でGoogle Calendarライクなカレンダーを使う〜fullcalendar-rails   gemは最新の1 …

TwitterBootstrapでアイコンが微妙な感じだったらFontAwesomeを試してみるといい

かもしれない fortawesome.github.com/Font-Awesome/ hallojsで使ってるのは上 github.com/bokmann/font-awesome-rails gi …

もしもRails3.2とBackbone.jsでリアルタイムな2ch風な掲示板をつくったら〜private_pub

By: Kevin Dooley – CC BY 2.0   まだ、Observerのことがよくわかってない ので、過去のやつをもとにやってみた dry-shore-2517.h …