属性一行，嵌套在下面（如何在表中显示正确的关系？） [英] Attribute a Row, Nested Below (How to Show Proper Relationship in Table?)

问题描述

这是我过去几个月开始Ruby on Rails旅程中遇到的最困难的问题。

似乎很多人会面对，但我找不到任何解决这个问题的网络，这意味着我的问题是简单易用，我是思考太难，或者我提出错误的问题。请帮助我找到正确的答案和/或正确的问题！

当用户提交表单时，它包括属性（量化）和嵌套属性（结果） 。当用户点击索引时，我希望他看到量化的在标题行中创建了一个新列（对于每个新的量化实例，它在整个页面上都是水平的）。那么对于他提交的每一个结果，或者稍后补充，我希望他看到这个结果在该列中创建一个新行（在页面上垂直向下）。

我希望我解释那么好，并没有让它听起来比它更混乱。

这里有一个变体，我可以让表看起来像使用html标签：

这是另一个变体：

但无论如何，我无法得到这一点，这就是我想要的：

我真的不知道在这一点上，因为我已经尝试了所有的东西，你需要什么代码来帮助我，而不是把这一切都倾倒在这里，我会通过github给你：的网格框架将是非常有帮助的。但是，这里是一个快速而且非常脏的想法，可以工作（假设你不在乎重量（磅）列没有02-2015值，所以03-2015的值是骑在另一个02-2015值）：

 < h2> AVERAGE< / h2> 
< div> 
<％@ smoot_quantifieds.each do | average | ％GT; 
<％均值.user == current_user％> 
<％＃
像这样的内联CSS通常是皱眉的。我正在使用它
这里仅用于演示目的。 
的最佳解决方案是使用Bootstrap或类似的东西，在宽屏幕上获得并排的
视图，并在较小的屏幕上从顶部到底部的视图。 
但我认为这是在这个特定问题的背景之外。 
％> 
< div style =float：left; width：200px;> 
< h4><％= smoot.name％> （<％= average.metric％>）< / h4> 
< ul> 
<％smoot.results.each do | result | ％GT; 
< li> 
<％= result.date_value.strftime（％m-％Y）％> 
& nbsp; 
<％= result.result_value％> 
< / li> 
<％end％> 
< / ul> 
< / div> 
<％end％> 
<％end％> 
  

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.

解决方案

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

这篇关于属性一行，嵌套在下面（如何在表中显示正确的关系？）的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！