リストの縞模様化

以前、ソフトウェアブックで試した方法と同じだが、すごく便利なメソッドの存在を知った。

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>
...（以下省略）...

public/stylesheets/scaffold_table.css

スタイルシート

• あとは、自分好みにスタイルシートを設定すれば、出来上がり。でも、この「自分好み」というところが難しい。なかなか思い通りにならないし、それ以前にデザインのセンスがない...。

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;
}