5

我目前有一个使用 Cocoon 生成的输入表单，并希望使其创建的输入字段可排序（使用 jQuery-ui 中的可排序）。

嵌套表单的代码是： 

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

呈现的部分（_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>

我可以通过将现有元素放在 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>

<script>
 $(document).ready(function() {
   $(".sortThese").sortable();
      });
 </script>

但是这样做会破坏 Cocoonlink_to_add_association和link_to_remove_association. 使用<ul>with<li>也会导致同样的 Cocoon 故障。我一直在寻找一些 javascript 来将每个输入表单移入和移出可排序的 div（这样做似乎使链接再次工作），但显然这是不雅的。如果有人有任何建议，我真的很感激他们！

4

2 回答 2

2

如果您删除<li>标签，它会很好地排序。在我的项目中尝试过，我有相同的标记，除了li部分的包装器，它可以工作。

于 2012-09-28T15:24:19.487 回答
1

即使<li>标签在您的部分中，将列表项拖动到新位置也只会移动列表项<li>标签内的内容。不幸的是，拖动该项目不会移动该项目的隐藏父<input>标记，因为 cocoon 将它放置在您的嵌套字段之外（即在您的之外<li>）。因此，尽管您的列表将在浏览器中显示为已排序，但更改不会反映在控制器方法接收的参数中。

如果您找到了解决方案，请发布。

谢谢

于 2014-01-31T18:10:24.147 回答