Ruby on Rails列表頁(yè)面可以被我們進(jìn)行優(yōu)化。美化后的列表頁(yè)面可以幫助我們一目了然的讀懂列表，方便我們編寫程序。在這里我們將會(huì)介紹Ruby on Rails列表頁(yè)面的一些美化技巧。#t#

1.　 打開appviewsadminlist.rhtml文件，可以看到下面的代碼

1. < h1>Listing products< /h1> 
2. < table> 
3. < tr> 
4. <% for column in Product.content_columns %> 
5. < th>< %= column.human_name %>< /th> 
6. <% end %> 
7. < /tr> 
8. <% for product in @products %> 
9. < tr> 
10. <% for column in Product.content_columns %> 
11. <td><%=h product.send(column.name) %></td> 
12. <% end %> 
13. <td><%= link_to 'Show', :action => 'show',
     :id => product %></td> 
14. <td><%= link_to 'Edit', :action => 'edit', 
    :id => product %></td> 
15. <td><%= link_to 'Destroy', { :action => 
    'destroy', :id => product }, :confirm => 
    'Are you sure?', :method => :post %></td> 
16. </tr> 
17. <% end %> 
18. </table> 
19. <%= link_to 'Previous page', { :page =>
     @product_pages.current.previous } if 
    @product_pages.current.previous %> 
20. <%= link_to 'Next page', { :page => 
    @product_pages.current.next } if 
    @product_pages.current.next %> 
21. <br /> 
22. <%= link_to 'New product', :action => 'new' %> 

可以看到，list頁(yè)面實(shí)際上是對(duì)Products做循環(huán)，然后對(duì)每行，每列逐個(gè)輸出到一個(gè)Table中，而link_to函數(shù)，我們?cè)谇懊娴膬?nèi)容中也使用過。

Ruby on Rails列表頁(yè)面2.修改appviewsadminlist.rhtml的內(nèi)容，如下：

<h1>Product Listing</h1> 
<table cellpadding="5" cellspacing="0"> 
<%  
odd_or_even = 0 
for product in @products  
odd_or_even = 1 - odd_or_even  
%> 
<tr valign="top" class="
ListLine<%= odd_or_even %>"> 
<td> 
<img width="60" height="70" src="
<%= product.image_url %>"/> 
</td> 
<td width="60%"> 
<span class="ListTitle"><%=
 h(product.title) %></span><br /> 
<%= h(truncate(product.description, 80)) %> 
</td> 
<td align="right"> 
<%= product.date_available.strftime
("%y-%m-%d") %><br/> 
<strong>$<%= sprintf("%0.2f", 
product.price) %></strong> 
</td> 
<td class="ListActions"> 
<%= link_to 'Show', :action => 'show', 
:id => product %><br/> 
<%= link_to 'Edit', :action => 'edit', 
:id => product %><br/> 
<%= link_to 'Destroy', { :action => 
'destroy', :id => product },  
:confirm => "Are you sure?" %> 
</td> 
</tr> 
<% end %> 
</table> 
<%= if @product_pages.current.previous  
link_to("Previous page", { :page => 
@product_pages.current.previous })  
end  
%> 
<%= if @product_pages.current.next  
link_to("Next page", { :page =>
 @product_pages.current.next })  
end  
%> 
<br /> 
<%= link_to 'New product', :action => 'new' %> 

Ruby on Rails列表頁(yè)面3.在上面的代碼里，我們可以看到td class="ListActions"這樣的代碼，下來我們添加這些css樣式的內(nèi)容：

將下面的內(nèi)容添加到publicstylesheets scaffold.css文件中：

.ListTitle {  
color: #244;  
font-weight: bold;  
font-size: larger;  
}  
.ListActions {  
font-size: x-small;  
text-align: right;  
padding-left: 1em;  
}  
.ListLine0 {  
background: #e0f8f8;  
}  
.ListLine1 {  
background: #f8b0f8;  
} 

OK，今天Ruby on Rails列表頁(yè)面的優(yōu)化內(nèi)容就介紹到這里。