Định dạng bảng lồng nhau với simple_form, nested_form và twitter-bootstrap

Question

Cập nhật:Tôi cập nhật điều này sau khi thực hiện một số việc đào bới và nhận ra rằng đây có thể là lỗi khởi động twitter gây ra sự cố.

Đây là một phiên bản thô của hình thức lồng nhau của tôi:

<%= simple_nested_form_for @user, :html => { :class => 'form-horizontal' } do |f| %> 
    <fieldset> 
    <%= f.input :email %> 
    <%= f.input :name_first %> 
    <%= f.input :name_last %> 

      <table class="table table-striped"> 
       <thead> 
       <tr> 
        <th>Active</th> 
        <th>Company</th> 
        <th>Role</th> 
        <th>Actions</th> 
       </tr> 
       </thead> 
       <tbody> 
        <%= f.simple_fields_for :roles, :wrapper_tag => :tr do |role_form| %> 
        <td><%= role_form.hidden_field :id %><%= role_form.input :active, :label => false, :wrapper => false %></td> 
        <td><%= role_form.association :company, :label => false, :wrapper => false %></td> 
        <td><%= role_form.input :role, :label => false, :collection => [ "Guest", "User", "Inspector", "Owner"], :wrapper => false %></td> 
        <td><%= role_form.link_to_remove "Delete", :class => 'btn btn-mini btn-danger' %> 
        </td> 
        <% end %> 
       </tbody> 
      </table> 
       <p><%= f.link_to_add "Add a Role", :roles %></p> 
     </div> 

    <div class="form-actions"> 
     <%= f.submit nil, :class => 'btn btn-primary' %> 
     <%= link_to 'Cancel', users_path, :class => 'btn' %> 
    </div> 
    </fieldset> 
<% end %> 

Khi nó trả lại các trường trong hàng bảng được thụt vào giống như hình thức phụ huynh thông qua { :class => 'form-horizontal' }. Tôi chỉ muốn các lĩnh vực không có div wrapper vv và dường như không thể tìm ra nó. Tôi nghĩ rằng :wrapper => false là vé nhưng không có may mắn cho đến nay.

Dan

Answer 1

Tôi tự mình tìm ra. Bạn phải di chuyển các hình thức phong cách (mẫu-ngang) vào một div chỉ quanh các lĩnh vực phi lồng nhau:

<%= simple_nested_form_for @user do |f| %> 
    <fieldset> 
    <div class="form-horizontal"> 
    <%= f.input :email %> 
    <%= f.input :name_first %> 
    <%= f.input :name_last %> 
    <%= f.input :phone %> 
    <%= f.input :mobile %> 

    <%= f.input :password %> 
    <%= f.input :password_confirmation %> 
    </div> 
    <div class="tubbable">... 

Answer 2

Nếu bạn muốn sử dụng một bảng (như trong ví dụ ban đầu của bạn) để thực hiện việc bố trí, tôi đã vá đá quý nested_form tại đây https://github.com/ritchiey/nested_form để cho phép điều đó.

Để xác định rằng bạn muốn các lĩnh vực mới được nối ở dưới cùng của tbody và bọc trong một tr, thay thế cuộc gọi link_to_add hiện tại của bạn với:

<%= f.link_to_add "Add a Role", :roles, :container =>'tbody', :fields_element=>'tr'%> 

Lưu ý:: container param là một chọn CSS.

Answer 3

Thêm :wrapper => false vào cuộc gọi simple_nested_form_for. Vấn đề là, rằng: wrapper => false trong simple_fields_for bị ghi đè bởi mặc định: wrapper => nil trong cấu hình simple_form_for.

Xem liên kết này cho một thiết lập: How To: Render nested fields inside a table

Answer 4

Không chắc nếu đây là những gì bạn muốn, nhưng nếu bạn muốn loại bỏ các div wrapper từ một lĩnh vực đầu vào, sử dụng f.input_field thay vì f.input:

= f.input_field :email, label: false, placeholder: 'email'