Rails nested_form thêm các mục vào hàng bảng

Question

Mục tiêu của tôi là sử dụng đá quý nested_form: https://github.com/ryanb/nested_form nhưng thay vì chỉ tạo một nhóm nhãn và trường mới mỗi khi bạn thêm đối tượng, tôi muốn chèn hàng vào bảng hiện có .

= 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 

Nút .link_to_add chỉ tạo một loạt các trường trong hàng đầu tiên, td đầu tiên.

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

Tôi đã thử đặt .link_to_add ở một vài nơi nhưng không đặt chúng vào hàng của riêng chúng.

Có cách nào dễ dàng để thêm khoảng một hàng hộp nhập liệu mỗi lần không?

Answer 1

này đã giúp tôi rất nhiều: https://github.com/ryanb/nested_form/wiki/How-To:-Render-nested-fields-inside-a-table

Theo mặc định fields_for bên nested_form_for thêm <div class="fields"> wrapper xung quanh mọi đối tượng lồng nhau. Nhưng khi bạn cần phải làm cho các trường lồng nhau bên trong một bảng, bạn có thể vô hiệu hóa wrapper mặc định sử dụng :wrapper => false lựa chọn và sử dụng các tùy chỉnh một:

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

Lưu ý: Bạn cần phải xác định lĩnh vực id. Nếu không fields_for sẽ chèn nó sau </tr>.

Ngoài ra bạn cần phải thay đổi hành vi mặc định chèn subforms mới vào mẫu của bạn sử dụng javascript:

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

Một kỹ thuật tương tự có thể được sử dụng cho các danh sách, để tương thích với một danh sách sắp xếp được jQuery UI.

Nếu bạn đang sử dụng simple_form, sau đó thêm tùy chọn: wrapper => false vào cuộc gọi simple_nested_form_for xung quanh, nếu không nó sẽ bị ghi đè bởi: wrapper => nil mặc định.

Answer 2

tôi đã kết thúc đặt link_to_add của tôi như là dòng cuối cùng của bảng, bổ sung này để application.js của tôi (chủ yếu là từ ví dụ trên 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); 
    } 
    }; 
}); 

dạng của tôi trông như thế này:

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