Rails 索引视图 - 在记录组之前将列数据显示为单独的标题行

Question

我遇到了一个问题，我必须在记录之前将列 td 数据显示为单独的标题行。这是我必须执行此操作的代码：

Rails index.html.erb code：

<table>
<tr>
  <th>Product</th>
  <th>Title</th>
  <th>Role</th>
  <th>Kind</th>
  <th>State</th>
  <th>Template</th>
  <th>AMI ID</th>
  <th>Last update</th>
  <th></th>
</tr>
<% @cb_templates.each do |cb_template| %>
<tr>
<th><%= cb_template.product ? cb_template.product.name : '' %></th>
<td><%= cb_template.title %></td>
<td><%= cb_template.role %></td>
<td><%= @kind_options[cb_template.kind][0] %></td>
<td><%= @state_options[cb_template.state][0] %></td>
<td><%= cb_template.template_id %></td>
<td><%= link_to cb_template.ami_id, @vdi_view_image_uri + cb_template.ami_id %></td>
<td><%= cb_template.updated_at.strftime("%b %d, %H:%M") %></td>
<td style="white-space: nowrap;">
  <%= link_to "Show", product %>
  <%= link_to "Edit", edit_product_path(cb_template)%>
</td>
</tr>
< % end %>
</table>

问题：产品名称在 ：index 页面上占用太多空间，并且当产品名称太长时，右侧的信息无法显示。

任务：上面：索引页面的精心布局，因此产品名称不会显示在每条记录的左侧，而是在记录组之前显示为单独的标题行。通过在 app/helpers/application_helper.rb 中添加一个帮助程序方法并在 ：index 页面上使用它来实现这一点。

我尝试了很多来创建表头但没有成功，如果有人对如何执行此任务有任何想法，请告诉我。

谢谢院长

Answer 1

使用 group 按产品分组，然后首先循环遍历组以呈现<th colspan="8">PRORUCT</td>，并在其他属性上进行内部循环：

http://api.rubyonrails.org/classes/ActiveRecord/QueryMethods.html#method-i-group

这根本不需要帮助程序。请尝试自己实现。这并不太难，您肯定会通过这样做学到一些东西。

Answer 2

你的代码对我来说看起来不错;我想主要问题是：

问题产品名称在 ：索引页面上占用太多空间并阻止 产品名称过长时显示右侧的信息

这要么是一个CSS问题，要么通过truncate解决：

---

.CSS

这将防止<th>元素具有多行文本，以及文本太长。它使用 text-overflow 属性：

#app/assets/stylesheets/application.css.sass
table
  tr
    th
      width: 150px
      overflow: hidden
      text:
          overflow: ellipsis
      white:
          space: no-wrap

---

截断

或者，您可以使用truncate截断文本：

<%= cb_template.product ? truncate(cb_template.product.name, length: 20) : '' %>