Rails nested_form agregando elementos a las filas de la tabla

Question

Mi objetivo es usar la gema nested_form: https://github.com/ryanb/nested_form pero en vez de crear solo un nuevo conjunto de etiquetas y campos cada vez que agrega un objeto, quería insertar una fila en una tabla existente .

= nested_form_for @transaction do |f| 
%h3 Line Items 
%table 
    %tr 
    %th Branch 
    %th Department 
    %th Invoice # 
    %th Amount 
    %th Transaction Type 
    %th Deposit (y/n) 
    %th 

    = f.fields_for :line_items do |line_item| 
    %tr 
     %td 
     = line_item.text_field :location_id 
     %td 
     = line_item.text_field :department_id 
     %td 
     = line_item.text_field :invoice_num 
     %td 
     = line_item.text_field :amount 
     %td 
     = line_item.text_field :transaction_type 
     %td 
     = line_item.text_field :deposit 
     %td= line_item.link_to_remove "Remove" 
    %p= f.link_to_add "Add", :line_items 

El botón .link_to_add sólo crea un montón de campos en la primera fila, primera td.

<h3>Line Items</h3> 
<table> 
    <tr> 
    <th>Branch</th> 
    <th>Department</th> 
    <th>Invoice #</th> 
    <th>Amount</th> 
    <th>Transaction Type</th> 
    <th>Deposit (y/n)</th> 
    <th></th> 
    </tr> 
    <div class="fields"><tr> 
    <td> 
     <input id="transaction_line_items_attributes_0_location_id" name="transaction[line_items_attributes][0][location_id]" size="30" type="text" /> 
    </td> 
    <td> 
     <input id="transaction_line_items_attributes_0_department_id" name="transaction[line_items_attributes][0][department_id]" size="30" type="text" /> 
    </td> 
    <td> 
     <input id="transaction_line_items_attributes_0_invoice_num" name="transaction[line_items_attributes][0][invoice_num]" size="30" type="text" /> 
    </td> 
    <td> 
     <input id="transaction_line_items_attributes_0_amount" name="transaction[line_items_attributes][0][amount]" size="30" type="text" /> 
    </td> 
    <td> 
     <input id="transaction_line_items_attributes_0_transaction_type" name="transaction[line_items_attributes][0][transaction_type]" size="30" type="text" /> 
    </td> 
    <td> 
     <input id="transaction_line_items_attributes_0_deposit" name="transaction[line_items_attributes][0][deposit]" size="30" type="text" /> 
    </td> 
    <td><input id="transaction_line_items_attributes_0__destroy" name="transaction[line_items_attributes][0][_destroy]" type="hidden" value="false" /><a href="javascript:void(0)" class="remove_nested_fields" data-association="line_items">Remove</a></td> 
    </tr> 
    <td><a href="javascript:void(0)" class="add_nested_fields" data-association="line_items">Add</a></td> 
    </div> 
</table> 

He intentado colocar el .link_to_add en algunos lugares, pero no las pone en su propia fila.

¿Hay una manera fácil de ir agregando una fila de cuadros de entrada cada vez?

Answer 1

Esto me ha ayudado mucho: https://github.com/ryanb/nested_form/wiki/How-To:-Render-nested-fields-inside-a-table

Por defecto fields_for dentro nested_form_for añade <div class="fields"> envoltura alrededor de cada objeto anidado. Pero cuando se necesita para hacer que los campos anidados dentro de una tabla puede desactivar derivador predeterminado usando :wrapper => false opción y utilice la costumbre uno:

<table> 
    <%= f.fields_for :tasks, :wrapper => false do |task_form| %> 
    <tr class="fields"> 
     <td> 
     <%= task_form.hidden_field :id %> 
     <%= task_form.text_field :name %> 
     </td> 
     <td><%= task_form.link_to_remove 'Remove' %></td> 
    </tr> 
    <% end %> 
    <tr> 
    <td><%= f.link_to_add 'Add', :tasks %></td> 
    </tr> 
</table> 

Nota: Es necesario especificar campo id. De lo contrario, fields_for lo insertará después de </tr>.

También hay que anular el comportamiento por defecto de la inserción de nuevos subformularios en el formulario usando javascript:

window.NestedFormEvents.prototype.insertFields = function(content, assoc, link) { 
    var $tr = $(link).closest('tr'); 
    return $(content).insertBefore($tr); 
} 

Una técnica similar se puede utilizar para las listas, para la compatibilidad con una lista ordenable jQuery UI.

Si está utilizando simple_form, agregue la opción: wrapper => false a la llamada circundante simple_nested_form_for, de lo contrario, se sobrescribe con: wrapper => nil default.

Answer 2

me acabó poniendo mi link_to_add como la última línea de la tabla, añadido esto a mis application.js (sobre todo a partir del ejemplo de la wiki)

jQuery(function ($) { 
    window.NestedFormEvents.prototype.insertFields = function(content, assoc, link) { 
    if($(link).hasClass('insert_in_table')){ 
     return $(content).insertBefore($(link).parent().parent()); 
    } 
    else{ 
     return $(content).insertBefore(link); 
    } 
    }; 
}); 

Mi forma se parece a esto:

<table class="tab"> 
    <tr> 
    <th>My Headers</th> 
    </tr> 
<%= f.fields_for :line_items, :wrapper => false do |form| %> 
    <tr class="fields"> 
    <td>MY FIELDS</td> 
    </tr> 
<% end %> 
    <tr> 
    <td><%= f.link_to_add "Add more line items", :line_items, :class => 'insert_in_table' %></td> 
    </tr> 
</table>