使用繭（嵌套表格）和jQuery可排序一起

我現在有使用繭產生的輸入形式，並希望使通過它可排序創建的輸入字段（使用來自jQuery的UI可排序）。使用繭（嵌套表格）和jQuery可排序一起

的嵌套形式的代碼是：

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

我能夠通過將它們的內部獲得排序現有元素<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>

但是，這樣做打破繭的link_to_add_association和link_to_remove_association的功能。使用<ul>與<li>也會導致相同的Cocoon故障。我一直在四處尋找破解一些JavaScript，在進出排序的div移動每個輸入表格（這樣做似乎使鏈接重新工作），但顯然這是不雅。如果有人有任何建議，我會很感激他們！

來源

2012-06-26 user1483188

它排序好了，如果你刪除<li>標籤。嘗試在我的項目中，我有相同的標記，除了li包裝的部分，它的作品。

來源

2012-09-28 15:24:19

即使您的partial中有<li>標記，將列表項目拖動到新位置也只會移動列表項目的<li>標記內的內容。不幸的是，拖動項目將不會移動的項目的隱藏父<input>標記，因爲繭的地方它的嵌套領域之外（即您<li>外）。因此，雖然您的列表將在瀏覽器中顯示排序，但這些更改不會反映在您的控制器方法收到的參數中。

如果您發現了一個解決方案，請張貼。

感謝

來源

2014-01-31 18:10:24 sdoxsee

不知道從哪個版本，但目前軌道'fields_for'（這是由'simple_fields_for'包裹）增加了一個隱藏的輸入字段爲'id'。你可以通過給'simple_fields_for'選項'：include_id => false'來跳過這個。這將刪除隱藏的輸入，然後排序將像以前一樣再次運行。 – nathanvda

謝謝@nathanvda。這對我有用。唯一需要改變的其他事情是在部分字段中添加id作爲隱藏輸入，因爲我仍然需要id作爲我的嵌套對象。 – sdoxsee

使用繭（嵌套表格）和jQuery可排序一起

回答

相關問題