Attribute a Row, Nested Below (How to Show Proper Relationship in Table?)

问题

This is the most difficult question I've come to in the past few months of starting my Ruby on Rails journey.

It seems like many people would face it, but I can't find anything on the web that addresses this problem, which means my question is either insanely easy that I am thinking too hard or I am asking the wrong question. Please help me get to the right answer and/or the right question!

When a User submits a form it includes the attribute (quantified) and the nested attributes (result). When the User clicks on the index I want him to see that the quantified created a new column in the header row (for each new quantified instance it goes right horizontally across the page). Then for every result he submitted or later adds I want him to see the result create a new row in that column (going vertically down the page).

I hope I explained that well and didn't make it sound more confusing than it is.

Here's one variation of what I can get the table to look like using html tags:

Here's another variation:

But for whatever reason I can't get this, which is what I want:

I really have no idea at this point, because I've tried everything, what code you need to help me so instead of dumping it all here I will give it to you here via github: https://github.com/RallyWithGalli/ruletoday

UPDATE

Using Patrick's answer below I was able to get the table to look like this:

The problem with it though is if a User adds another quantified such as meditate (min) and includes more result rows then the row preceding it then the result will move left until it hits another column with that many rows or more. In the example above "2.1" should be in the meditate column, but instead it fell into the weight column.

UPDATE 2.0

With Patrick's update below this is what it looks like now:

Thanks again for trying Patrick. You're the man for sticking it out with me this far. You mentioned bootstrap. I'll give that another look.

Thanks in advance for your help! I'll be forever in your debt.

回答1:

It's tricky because the data is column-wise but we need it row-wise. I'm not 100% sure I understand how the quantified data is laid out but the gist of the solution is, you need two separate loops since the heading <thead> and data <tbody> are in separate sections of a <table>. Let's re-work the table for averages:

<h2>AVERAGE</h2>
<%
  averaged_data_rows = {} 
%>
<%# averaged_data_rows should end up as:
  {
    0 => [result, result, result],
    1 => [result, result, result],
    etc.
  }
%>
<table>
  <thead>
    <tr>
      <% @averaged_quantifieds.each do |averaged| %>
        <% if averaged.user == current_user %>     
          <th><%= averaged.name %> (<%= averaged.metric %>)</th>
          <% 
            averaged.results.each_index do |idx|
              averaged_data_rows[idx] ||= []
              averaged_data_rows[idx] << averaged.results.to_a[idx]
            end
          %>
        <% end %>
      <% end %>
    </tr>
  </thead>
  <tbody>
    <% averaged_data_rows.values.each do |row| %>
      <tr>
        <% row.each do |result| %>
          <td>
            <%= result.date_value.strftime("%m-%Y") %>
            &nbsp;
            <%= result.result_value %>
          </td>
        <% end %>
      </tr>
    <% end %>
  </tbody>
</table>

UPDATE

I was afraid of that. Another possibility is to leave the data column-wise and do floated unordered lists. It would be really helpful to use a grid-framework like Bootstrap. But here is a quick and very dirty idea that could work (assuming you don't care that the Weight (pounds) column doesn't have an 02-2015 value so it's 03-2015 value is riding next to the other 02-2015 values):

<h2>AVERAGE</h2>
<div>
  <% @averaged_quantifieds.each do |averaged| %>
    <% if averaged.user == current_user %>
      <%# 
        Inline CSS like this is generally frowned upon. I am using it
        here for demonstration purposes only. The best solution would
        be to use Bootstrap or something like it to get the side-by-side
        view on wide screens and top-to-bottom view on smaller screens.
        But I think that is outside the context of this particular question.
      %>
      <div style="float:left; width:200px;">
        <h4><%= averaged.name %> (<%= averaged.metric %>)</h4>
        <ul>
          <% averaged.results.each do |result| %>
            <li>
              <%= result.date_value.strftime("%m-%Y") %>
              &nbsp;
              <%= result.result_value %>
            </li>
          <% end %>
        </ul>
      </div>
    <% end %>
  <% end %>

来源：https://stackoverflow.com/questions/28267633/attribute-a-row-nested-below-how-to-show-proper-relationship-in-table