9

私の目標は、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をいくつかの場所に配置しようとしましたが、それらを独自の行に配置しません。

毎回入力ボックスの行を追加する簡単な方法はありますか？

4

2 に答える 2

18

これは私を大いに助けました：https ：//github.com/ryanb/nested_form/wiki/How-To：-Render-nested-fields-inside-a-table

デフォルトでは、 fields_forinsideはすべてのネストされたオブジェクトの周りにラッパーをnested_form_for追加します。<div class="fields">ただし、テーブル内にネストされたフィールドをレンダリングする必要がある場合は: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のデフォルトで上書きされます。

于 2012-09-28T00:59:26.707 に答える
0

最終的に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>
于 2013-02-20T17:55:06.897 に答える