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函数，我们在前面的内容中也使用过。

 

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>$<%= 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?",
                                                 :method => :post %>

      </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' %>

3.        在上面的代码里，我们可以看到td class="ListActions"这样的代码，下来我们添加这些css样式的内容：

将下面的内容添加到public/stylesheets/ scaffold.css文件中：

body { background-color: #fff; color: #333; }

body, p, ol, ul, td {
  font-family: verdana, arial, helvetica, sans-serif;
  font-size:   13px;
  line-height: 18px;
}

pre {
  background-color: #eee;
  padding: 10px;
  font-size: 11px;
}

a { color: #000; }
a:visited { color: #666; }
a:hover { color: #fff; background-color:#000; }

.fieldWithErrors {
  padding: 2px;
  background-color: red;
  display: table;
}

#errorExplanation {
  width: 400px;
  border: 2px solid red;
  padding: 7px;
  padding-bottom: 12px;
  margin-bottom: 20px;
  background-color: #f0f0f0;
}

#errorExplanation h2 {
  text-align: left;
  font-weight: bold;
  padding: 5px 5px 5px 15px;
  font-size: 12px;
  margin: -7px;
  background-color: #c00;
  color: #fff;
}

#errorExplanation p {
  color: #333;
  margin-bottom: 0;
  padding: 5px;
}

#errorExplanation ul li {
  font-size: 12px;
  list-style: square;
}

div.uploadStatus {
  margin: 5px;
}

div.progressBar {
  margin: 5px;
}

div.progressBar div.border {
  background-color: #fff;
  border: 1px solid grey;
  width: 100%;
}

div.progressBar div.background {
  background-color: #333;
  height: 18px;
  width: 0%;
}

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

}

4.        再次运行Products的list页面，可以看到效果，如图：

 

OK，今天的内容很简单，今后我会尽量多写些自己的东西，不光是抄书了。