Rails nested_form向表格行添加项目

Question

我的目标是使用nested_form gem：https://github.com/ryanb/nested_form ，但不是每次添加对象时都只创建一组新的标签和字段，而是希望将行插入现有表格。

= 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 

.link_to_add按钮只在第一行第一个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> 

我试过在几个地方放置.link_to_add，但它并没有把它们放在自己的行中。

是否有简单的方法去添加一行输入框每次？

Answer 1

这对我帮助很大：https://github.com/ryanb/nested_form/wiki/How-To:-Render-nested-fields-inside-a-table

默认情况下fields_for内nested_form_for增加了周围的每一个嵌套的对象​​包装。但是，当你需要渲染的表内嵌套的字段，你可以使用:wrapper => false选项来禁用默认的包装，并使用自定义的：

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

注意：您需要指定id字段。否则，fields_for将在</tr>之后插入它。

而且你需要重写使用javascript中插入新的子窗体到表单的默认行为：

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

类似的技术可用于列表，可以兼容jQuery UI的排序列表。

如果您使用的是simple_form，然后为周围的simple_nested_form_for调用添加：wrapper => false选项，否则它会被：wrapper => nil default覆盖。

Answer 2

最后我把我的link_to_add作为表的最后一行，将此添加到我的application.js（大多来自例如在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); 
    } 
    }; 
}); 

我的形式如下：

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