リストの縞模様化
以前、ソフトウェアブックで試した方法と同じだが、すごく便利なメソッドの存在を知った。
cycleを利用する
- 以下のようにやれば、class属性"light"と"dark"を交互に繰り返してくれる。ペルパメソッドに定義するまでもなく、こんなに便利なメソッドがあったとは...。
<tr class=<%= cycle("light", "dark") %>>
並び替えキー列を強調表示する
引き続き、縞模様な表示を保ったまま、並び替えのキーになっている列は、マスクをかけて強調表示してみる。並び替えのキー列かどうか判定するarrangedメソッドをヘルパに登録した。
- app/helpers/application_helper.rb
- ヘルパ
def arranged(column_name) column_name == params[:sort_field] ? "arranged" : "free" end
- app/views/csvs/_listd.rhtml
- ビュー(リストデータの描画)
- ビューではarrangedメソッドを呼び出して、tdタグのclass属性に"arranged"か"free"を設定する。
<!--[:]--> <tr class=<%= cycle("light", "dark") %>> <%# リストデータの表示 %> <td class=<%= arranged("file_name") %>> <%= link_to h(listd.file_name), :controller => 'displays', :action=>'list', :table => listd.csv_table, :editable => listd.editable %></td> <td class=<%= arranged("file_comment") %>> <%=h listd.file_comment %></td> <td class=<%= arranged("editable") %>> <%= listd.editable ? "編集可能" : "表示のみ" %></td> <td class=<%= arranged("file_size") %> align="right"> <%=h listd.file_size.to_s.gsub(/(\d)(?=(\d\d\d)+(?!\d))/, '\1,') %> B</td> <td class=<%= arranged("created_at") %>> <%=h listd.created_at.strftime('%Y/%m/%d %H:%M:%S') %></td> <td class=<%= arranged("file_updated_at") %>> <%=h listd.file_updated_at.strftime('%Y/%m/%d %H:%M:%S') if listd.file_updated_at %></td> <td class=<%= arranged("management_section_id") %>> <%=h listd.management_section.name if listd.management_section_id > 0 %></td> <td class=<%= arranged("user_id") %>> <%=h listd.user.fullname if listd.user_id > 0 %></td> ...(以下省略)...
- あとは、自分好みにスタイルシートを設定すれば、出来上がり。でも、この「自分好み」というところが難しい。なかなか思い通りにならないし、それ以前にデザインのセンスがない...。
table { background-color: whitesmoke; } table{ border-color: #AAAAAA; border-width: 1px; border-style: ridge none none ridge; border-collapse: separate; border-spacing: 1px; margin: 0; padding: 0; font-size: 100%; empty-cells: show; } table th { border-style: none ridge ridge none; border-color: #AAAAAA; border-width: 1px; background-color: #EFEFEF; } table td { border-style: none ridge ridge none; border-color: #AAAAAA; border-width: 1px; background-color: #FFFFFF; } /* 縞模様リストの設定 */ table tr.light td { background-color: #FFFFFF;/* 明るい縞模様 #FFFFFF white*/ } table tr.dark td { background-color: #F0FFFF;/* 暗い縞模様 #F0FFFF azure*/ } /* 並べ替えキー列の設定 */ table tr th.asc, table tr th.desc { background-color: #D6D6D6;/* キー列のタイトル */ } table tr.light td.arranged { background-color: #E4E4E4;/* キー列の明るい縞模様 */ } table tr.dark td.arranged { background-color: #D7E4E4;/* キー列の暗い縞模様 */ } /* Table Column Headers ============================= */ th { text-align: left; } th a, th p { font: bold 11px verdana, sans-serif; display: block; } th a, th a:visited { color: #999; padding: 2px 20px 2px 2px; } th a:hover { background-color: #000; color: #fff; } th.sorted { background-color: lavender; } th.asc a { background: lavender url(../images/arrow_up.gif) right 50% no-repeat; background-color: #D6D6D6; color: #000; } th.asc a:hover { background: #000 url(../images/arrow_up.gif) right 50% no-repeat; background-color: #D6D6D6; color: #fff; } th.desc a { background: lavender url(../images/arrow_down.gif) right 50% no-repeat; background-color: #D6D6D6; color: #000; } th.desc a:hover { background: #000 url(../images/arrow_down.gif) right 50% no-repeat; background-color: #D6D6D6; color: #fff; } th.loading a, th.loading a:hover { background: lavender url(../images/indicator.gif) right 50% no-repeat; }