使用simple_form，nested_form和twitter-bootstrap嵌套表格格式

更新：我在做了一些挖掘並意識到這可能是導致問題的twitter-bootstrap後更新了此內容。使用simple_form，nested_form和twitter-bootstrap嵌套表格格式

這裏是我的嵌套形式的粗略版本：

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

當它呈現表中的行中的字段縮進一樣通過{ :class => 'form-horizontal' }父窗體。我只是想要沒有包裝divs等字段，似乎無法弄清楚。我認爲:wrapper => false是票，但迄今爲止沒有運氣。

丹

來源

2012-03-18 Dan Tappin

我終於弄明白了我自己。你必須在表單樣式（形式 - 水平）移動到一個div就在非嵌套字段：如果你想使用一個表（在你最初的例子）進行佈局

<%= 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">...

來源

2012-03-25 20:10:03

你可以發佈你的完整的最終解決方案，因爲我得到的問題將nested_form部分添加到表中，它看起來你正在工作。我會感激。 – 2012-10-16 22:30:20

我最終離開了這個觀點 - 如果我記得圍繞輸入的div是最終的解決方案。 – 2012-10-20 06:30:52

，我已修補nested_form gem https://github.com/ritchiey/nested_form以允許。

要指定您希望在TBODY的底部附加和包裹在一個TR的新領域，以替換當前link_to_add電話：

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

注：：容器參數是一個CSS選擇器。

來源

2012-03-30 07:20:57 Ritchie

將:wrapper => false添加到simple_nested_form_for調用中。問題是：simple_fields_for中的wrapper => false會被simple_form_for配置中的默認值：wrapper => nil覆蓋。

請參閱此鏈接的設置： How To: Render nested fields inside a table

來源

2013-02-25 11:59:55 urandom

不知道這是否是你想要的，但如果你想從一個輸入字段刪除DIV包裝，使用f.input_field代替f.input：

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

來源

2013-09-03 14:43:09 kakubei

使用simple_form，nested_form和twitter-bootstrap嵌套表格格式

回答

相關問題