小编use*_*188的帖子

使用Cocoon(嵌套表单)和jQuery可以一起排序

我目前有一个使用Cocoon生成的输入表单,并希望使其创建的输入字段可排序(使用jQuery-ui中的sortable).

嵌套表单的代码是:

<%= f.simple_fields_for :checkout_procedures do |procedure| %>  
  <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
<% end %>  
<div class="links">
  <%= link_to_add_association 'add step', f, :checkout_procedures %>
</div>
Run Code Online (Sandbox Code Playgroud)

渲染的部分(_checkout_procedure_fields)是:

<div class="checkout_procedure nested-fields">
  <table>
    <tr>
      <td><%= f.input :step %></td>
      <td><%= link_to_remove_association "remove step", f %></td>
    </tr>
  </table>
</div>
Run Code Online (Sandbox Code Playgroud)

我可以通过将现有元素置于a中<div>并使用jQuery 将其设置为可排序来使现有元素可排序:

<div class="sortThese">
   <%= f.simple_fields_for :checkout_procedures do |procedure| %>  
     <li><%= render 'checkout_procedure_fields', :f => procedure %></li> 
   <% end %>  
</div> 
<div class="links">
  <%= link_to_add_association 'add step', f, :checkout_procedures %>
</div> …
Run Code Online (Sandbox Code Playgroud)

jquery ruby-on-rails jquery-ui-sortable nested-attributes cocoon-gem

5
推荐指数
1
解决办法
1953
查看次数