Question

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

Rails index.html.erb代码：

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

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

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

我尝试了很多来创建表头但没有成功，请告诉我是否有任何人知道如何执行此任务..

谢谢，迪恩

Answer 1

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

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

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

Answer 2

你的代码对我来说没问题;我想主要问题是：

ISSUE产品名称占用太多空间：索引页面并阻止产品名称太长时显示的权利信息

这可能是一个CSS问题，也可能是truncate解决的：

<强> CSS

这将阻止<th>元素具有多行文本，并且文本太长。它使用text-overflow property：

#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) : '' %>

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

2 个答案: