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>