TodoList: 縞縞模様2007年01月14日 10時39分43秒

リスト表示の時に、テーブルの項目数が多く、横スクロールさせなくなると、どれがどのレコードなのか分かりづらくなる。そこで、テーブルを縞々にしたい。

まずは、テーブルに罫線引く。無くても、大丈夫そうではあった。今回、色を付けたいテーブル内は _add2.rhtml で表示されるテーブルだ。_add2.rhtml は render partial collection で collection を渡し、各項目を自動で表示する。


% cvs diff app/views/todo/show.rthml
--- app/views/todo/show.rhtml   10 Jan 2007 05:24:16 -0000      1.6
+++ app/views/todo/show.rhtml   12 Jan 2007 04:19:40 -0000
@@ -4,7 +4,7 @@
 </p>
 <% end %>
 
-<table>
+<table border=1>
   <%= render :partial => 'add2', :collection => @todo.descriptions %>
 </table>

color 関数をどこからどう呼べばいいのか悩んだが、案ずるより産むがやすしで、_add2.rhtml を変更してみた。


% cvs diff app/views/todo/_add2.rthml
--- app/views/todo/_add2.rhtml  11 Jan 2007 04:02:33 -0000      1.3
+++ app/views/todo/_add2.rhtml  13 Jan 2007 04:43:07 -0000
@@ -1,6 +1,6 @@
 <%= error_messages_for 'description' %>
 
-<tr id="description_<%= add2.id %>" >
+<tr id="description_<%= add2.id %>" bgcolor="<%= cycle("white", "al
iceblue")%>">
 
   <!--[form:description]-->
   <td>

最初にこの変更で、うまくいくのか不安だったが問題なく動いている。

この動作と他の動作検証を元に推測すると、この cycle はページ毎の様だ。基本的には、表示単位内で何らかのローカル変数を持ち、その中でループを回しているみたいなだった。class を指定することも出来るようだ。詳しくは、 cycle API を参考にして欲しい。

前回次回