Ruby on rails开发从头来（windows）（六）-美化你的列表页面 - 编程入门网

Ruby on rails开发从头来（windows）（六）-美化你的列表页面

在上一篇随笔中，我们给Products的创建页面添加了输入验证，今次的内容非常简单，来稍稍美化下Products的列表页面。

1.打开app\views\admin\list.rhtml文件，可以看到下面的代码

<h1>Listing products</h1>
　　
<table>
　<tr>
　<% for column in Product.content_columns %>
　　<th><%= column.human_name %></th>
　<% end %>
　</tr>
<% for product in @products %>
　<tr>
　<% for column in Product.content_columns %>
　　<td><%=h product.send(column.name) %></td>
　<% end %>
　　<td><%= link_to ''Show'', :action => ''show'', :id => product %></td>
　　<td><%= link_to ''Edit'', :action => ''edit'', :id => product %></td>
　　<td><%= link_to ''Destroy'', { :action => ''destroy'', :id => product }, :confirm => ''Are you sure?'', :method => :post %></td>
　</tr>
<% end %>
</table>
　　
<%= link_to ''Previous page'', { :page => @product_pages.current.previous } if @product_pages.current.previous %>
<%= link_to ''Next page'', { :page => @product_pages.current.next } if @product_pages.current.next %>
　　
<br />
　　
<%= link_to ''New product'', :action => ''new'' %>

可以看到，list页面实际上是对Products做循环，然后对每行，每列逐个输出到一个Table中，而link_to函数，我们在前面的内容中也使用过。

Ruby on rails开发从头来（windows）（六）-美化你的列表页面(2)

2.修改app\views\admin\list.rhtml的内容，如下：

<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>contentlt;%= 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>
<%=

凌众科技专业提供服务器租用、服务器托管、企业邮局、虚拟主机等服务，公司网站：http://www.lingzhong.cn 为了给广大客户了解更多的技术信息，本技术文章收集来源于网络,凌众科技尊重文章作者的版权，如果有涉及你的版权有必要删除你的文章，请和我们联系。以上信息与文章正文是不可分割的一部分,如果您要转载本文章,请保留以上信息，谢谢!