酒と泪とRubyとRailsと

Ruby on Rails と Objective-C は酒の肴です!

凝ったHTMLテーブルを簡単に構築できる Gem WiceGrid

Gem WiceGridは、ソートや、フィルタリング、CSVエクスポートなどの機能が入ったHTMLテーブルを簡単に構築できるGemです。下のExamplesには、30種類のwice_gridの機能を紹介するデモがあります!

デモ(WiceGrid Examples)


Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

Gemのインストール

いつもどおりGemfileに以下を追加して、bundle installを実行してください。

1
2
# HTMLテーブル作成サポート
gem "wice_grid"

WiceGridの初期設定

次のコマンドで初期設定。

1
rails g wice_grid:install

上のコマンドで追加されるのは次の3つのフィアルです。

設定ファイル: config/initializers/wice_grid_config.rb
localeファイル: config/locales/wice_grid.yml
CSSファイル: app/assets/stylesheets/wice_grid.css.scss

WiceGrid 日本語化

悲しいことにlocaleファイルには日本語が記載されていませんでした。ですがそんなに設定は多くなかったので、日本語(ja)の設定を作ってみました。これをconfig/locales/wice_grid.ymlに追加して下さい。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
ja:
  date:
    order:
      - :
      - :
      - :
  wice_grid:
    show_filter_tooltip: フィルタ表示
    hide_filter_tooltip: フィルタ非表示
    csv_export_tooltip: CSVエクスポート
    filter_tooltip: フィルタ
    reset_filter_tooltip: リセット
    boolean_filter_true_label: "yes"
    boolean_filter_false_label: "no"
    previous_label: «
    next_label: »
    # Title of the icon clicking on which will show the calendar to set the FROM date.
    date_selector_tooltip_from: From
    # Title of the icon clicking on which will show the calendar to set the TO date.
    date_selector_tooltip_to: To
    # The title of the checkox to turn on negation
    negation_checkbox_title: 除外する
    # link to switch to show all records
    show_all_records_label: すべて表示
    # tooltip for the link to switch to show all records
    show_all_records_tooltip: 前レコード表示
    # Warning message shown when the user wants to switch to all-records mode
    all_queries_warning: 全てのレコードを表示しますか?
    # link to paginated view
    switch_back_to_paginated_mode_label: 戻る
    # tooltip for the link to paginated view
    switch_back_to_paginated_mode_tooltip: 戻る
    # Title of the date string.
    date_string_tooltip: 削除
    saved_query_panel_title: クエリ保存
    save_query_button_label: フィルタ保存
    saved_query_deletion_confirmation: 本当によろしいですか?
    saved_query_deletion_link_title: クエリ削除
    saved_query_link_title: クエリのロード
    validates_uniqueness_error: 同じ名前がすでに存在します
    validates_presence_error: クエリ名を記入して下さい
    query_deleted_message: クエリの削除が完了しました
    query_saved_message: クエリを保存しました
    select_all: 全てを選択
    deselect_all: 選択を解除
    expand: 開く
    collapse: 閉じる

ちなみに余談ですが、生まれて初めて上の設定をpull requestしました。 まずってなければそのうち反映してもらえるかもですw

scssをcssに変換

ここはもしscss以外を使いたい場合の対応です。scssをcssに変換してくれるサービスが『バシャログさんのSass&ScssをリアルタイムにCSSに変換できるSassmeister』に乗っています。

このサービスを使ってCSSに変換して、app/assets/stylesheets/wice_grid.css.scssと置き換えて使って下さい。

javascriptの読み込み設定

javascriptの読み込みを設定するために、app/assets/javascripts/application.jsに以下を追加して下さい。

1
//= require wice_grid

さらに、Date and DateTime filters, jQuery Datepickerを使いたい場合には以下の設定をapp/assets/javascripts/application.jsに追加して下さい。

1
2
3
4
5
6
//= require jquery
//= require jquery_ujs
//= require jquery-ui
//= require wice_grid
//= require jquery.ui.datepicker
//= require_tree .

ちょっと長くなりましたがwice_gridの設定はここまでです。

wice_gridの設置

まず、controller側に以下のコードを設置します。Taskがモデルです。orderやper_pageなどはオプションなのでなくてもOKです。

1
2
3
4
5
6
7
@tasks_grid = initialize_grid(Task.
    where(:archived => false, :projects => {:active => true}).
    joins(:project),
    :order => 'tasks.title',
    :order_direction => 'desc',
    :per_page => 40,
)

次にview側に次のコードを追記します。

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
= grid(@tasks_grid) do |g|
    g.column :name => 'ID', :attribute => 'id', :filter => false
    
    g.column :name => 'Title', :attribute => 'title'  do |task|
        - task.title
    
    g.column  :name => 'Description', :attribute => 'description' do |task|
        - task.description
    
    g.column  :name => 'Archived', :attribute => 'archived' do |task|
        - task.archived? ? 'Yes' : 'No'
    
    g.column :name => 'Added', :attribute => 'created_at', :ordering => false

    g.column do |task|
        - link_to('Edit', edit_task_path(task))

たったこれだけでソートや、フィルタリングに対応したテーブルを作ることができます。d

関連テーブルのカラムをソート、フィルタリング

個人的にすごいと感心したのが、関連テーブルのカラムまでソートやフィルタリングが出来る点です。

やり方としてはまず、model側に、関連テーブルの設定をします。

1
2
3
4
class Project < ActiveRecord::Base
  belongs_to :customer, :class_name => 'Company'
  belongs_to :supplier, :class_name => 'Company'
end

次にcontroller側にコードを追加します。先ほど都の違いは、includeオプションをつけている点です。

1
@projects_grid = initialize_grid(Project, :include => [:customer, :supplier] )

そしてview(haml)側に以下のコードを書きます。modelの設定を追加する点が先ほどと違います。

1
2
3
4
5
6
7
8
= grid(@projects_grid) do |g|
    g.column :name => 'Project Name', :attribute => 'name'

    g.column  :name => 'Customer company', :model => 'Company', :attribute => 'name' do |task|
        - task.customer.name if task.customer

    g.column  :name => 'Supplier company', :model => 'Company', :attribute => 'name', :table_alias => ' suppliers_projects' do |task|
        - task.supplier.name if task.supplier

たった、これで関連テーブルも含めたソート機能を実現できます。全て自力でコードを書く場合と比べれば超省エネで実現できてしまいます。

デモ(WiceGrid Examples)も、公式もすごくわかりやすいので、良かったら覗いて見て下さい!

WiceGrid GitHub

デモ(WiceGrid Examples)

Included file ‘custom/google_ads_yoko_naga.html’ not found in _includes directory

おすすめの書籍