2011-06-29 20 views
6

Estoy intentando mostrar un objeto en mi modelo en forma de tabla, pero estoy teniendo dificultades para intentar crear filas y columnas de forma dinámica.Ruby/Rails: cree dinámicamente una tabla para un número variable de celdas

Tengo un modelo llamado Imágenes y actualmente las estoy mostrando todas en una lista looooong.

<% for picture in @pictures %> 
    <p><%= image_tag(picture.url) %></p> 
<% end %> 

¿Cómo puedo convertir esto en una tabla en la vista con los rieles?

<table> 
<tr> 
<% for picture in @pictures %> 
    <td> 
     <%= image_tag(picture.url) %> 
    </td> 
** Here's where I'm confused..How can I write after 6 cells create a new row?? ***** 
<% end %> 
</table> 

Así que la pregunta está realmente relacionada con cómo dividir este tipo de datos dentro de la vista.

Respuesta

11

Eche un vistazo al método enumerable ".each_slice".

http://www.ruby-doc.org/core/classes/Enumerable.html#M001514

con ella se puede hacer algo a lo largo de las líneas de:

<table> 
    <% @pictures.each_slice(6) do |slice| %> 
    <tr> 
     <% slice.each do |picture| %> 
     <td> 
      <%= image_tag(picture.url) %> 
     </td> 
     <% end %> 
    </tr> 
    <% end %> 
</table> 

Puede que tenga que hacer un poco de tocar el violín para poblar la última fila muy bien, pero que debe obtener en su camino.

+1

sabía rubí/rieles tenía que tener algo en este sentido. No he tenido que hacer esto, sin embargo, nunca hice la investigación. –

+0

¡Esto se ve mejor que mi respuesta! Mucho más legible – drummondj

0

estoy seguro de rubí en los carriles tiene algunos ayudantes para esto - pero si no, así es como me he acercado a este tipo de diseño en mi vida pasada como un bajo nivel de desarrollador php:

mantener un recuento, Módulo 6 (es decir, i = (i + 1)% 6). Si i == 0, salida < tr> </tr>.

Por lo tanto, algo así como:

<% i = 0 %> 
<tr> 
    <% 
    @pictures.each do |picture| 
     i = (i + 1) % 6 
    %> 
    <%= '<tr></tr>' if i == 0 %> 
    <td> 
     <%= image_tag(picture.url) %> 
    </td> 
    <% end %> 
</tr> 
+0

Si usa este enfoque, en lugar de establecer "i", puede usar el método each_with_index. – Pavling

0

yo usaría% (módulo), algo como esto:

<table> 
    <% rows = 0 %> 
    <% @pictures.each do |picture| %> 
    <%= "<tr>" if rows % 6 %> 
    <td><%= image_tag(picture.url) %></td> 
    <% rows += 1 %> 
    <%= "</tr>" if rows % 6 %> 
    <% end %> 
    <%= "</tr>" unless rows % 6 %> 
</table> 
1

realmente cavar la solución each_slice. Solo pensé que me gustaría entrar si quería tener una vista no tabular, podría averiguar su ancho máximo y alto máximo para sus imágenes y establecer un contenedor alrededor de sus fotos y simplemente usar CSS para hacerlas flotar todas juntas. Cada fila contendría sin embargo muchos encajarían en su div que contiene.

vista

<% for picture in @pictures %> 
    <div class="photo"> 
    <%= image_tag(picture.url) %> 
    </div> 
    <div class="float_clear"></div> 
<% end %> 

css

.photo {height: 150px; width: 150px; float:left;margin:0 10px; 10px 0;} 
.photo img{max-height: 150px; max-width: 150px;} 
.float_clear{clear:both;} 
+1

Acepto, esto no responde la pregunta.Pero probablemente proporcione la solución que sería más correcta en términos de html y diseño receptivo. Las tablas no se deben usar para el diseño si hay otras opciones – jonas

+0

Gracias @jonas! Estoy seguro de que hay varias maneras diferentes de hacerlo mientras se siguen las mejores prácticas, ya que las vistas web son más exigentes en todos los dispositivos móviles. –

0

Otra buena manera de hacer esto en los carriles está utilizando el método in_groups_of.

lo que podría tener

<table> 
    <% @pictures.in_groups_of(6, false) do |group| %> 
    <tr> 
     <% group.each do |picture| %> 
     <td> 
      <%= image_tag(picture.url) %> 
     </td> 
     <% end %> 
    </tr> 
    <% end %> 
</table> 

Aquí está la documentación de dicho método: http://apidock.com/rails/Array/in_groups_of

Cuestiones relacionadas