jQuery UI：如何保存「可排序」？

我有一個「任務」的列表，我使用「可排序」，以便用戶可以優先考慮它們，將最重要的排在最前面。但是，當然，每次刷新頁面時都會回到原來的位置。我想知道是否可以保存任務的位置？jQuery UI：如何保存「可排序」？

這裏是我的代碼（這是一個Rails項目）：

<script src="http://code.jquery.com/ui/1.11.2/jquery-ui.js"></script> 

    <script> 
    $(document).ready(function() { 
     $('.move').sortable(); 
     }); 
    </script> 


<%= render "form" %> 



<div class="move"> 
<% if [email protected]? %> 
    <% for item in @project.tasks %> 
    <div class="container"> 
    <div class="panel panel-default"> 
    <div class="panel-heading"> 
    <div class='move'><%= item.title %></div> 
    </div> 
    </div> 
    <div class="panel-body"> 
    <p> 
    <div class='move'><%= item.description %></div> 
    </p> 
    <%= link_to "Edit", edit_project_task_path(@project, item) %> 
    </div> 
    </div> 
    <% end %> 
<% end %> 
</div>

來源

2015-02-09 roguerat

可以保存在數據庫中的狀態，並用它來加載正確 http://www.xmech.net/programming/jquery-ui-sortable-tutorial/ 或者如果您使用的信息表格而不是div，然後將該錶轉換爲Datable，然後您可以在不使用數據庫的情況下保存狀態。 https://datatables.net/examples/basic_init/state_save.html – 2015-02-09 10:08:51

您也可以嘗試設置當前代碼中的還原選項 http://stackoverflow.com/questions/13909665/jquery-ui-how- can-i-cancel-the-revert-a-sortable-element-on-successful-drop – 2015-02-09 10:19:35

你可以找到任務的索引，並將其保存和排序基於指數同時顯示。

要找到UI的任務指標是指這樣的： Fiddle

$("div").click(function(){ 
    var index = $("div").index($(this)); 
    var position = index+1; 
    $('span').html(position); 
})

來源

2015-02-09 07:28:44 Farhan

對不起，我發佈了錯誤的代碼。雖然我的形象，答案仍然應該是相同的，但我更新了原始帖子。我對你的意思有點困惑（我剛剛在幾周前開始編碼）。你說我應該用你發佈的內容替換我的jQuery？我試過了，我無法再移動這些任務。 – roguerat 2015-02-09 07:38:35

@roguerat當頁面刷新時，它們當然會被刪除。要麼您必須在數據庫或會話中保存訂單，因此當頁面刷新時，您可以按照正確的順序對齊它們。 – Runcorn 2015-02-09 08:16:04

您可以使用jQuery cookie，並得到使用LI位置jQuery UI的排序toArray：

序列化可排序的項目的ID成一個字符串數組。

然後在負載改變通過使用insertAfter和eq選擇斯威森它們的位置的位置裏。

代碼：

var savedOrd = $.cookie('sortOrder'); 
if (savedOrd) { 
    $.each(savedOrd.split(','), function (i, e) { 
     $('#' + e).insertAfter('#sortable>li:eq(' + i + ')'); 
    }); 
} 

$('#save').click(function() { 
    var saveOrd = $('#sortable').sortable('toArray'); 
    $.cookie('sortOrder', saveOrd); 
});

演示：http://jsfiddle.net/IrvinDominin/amq6gt8w/

或者代替使用的cookie，你可以調用兩個服務器的方法來設置和獲取元素位置。

來源

2015-02-09 08:21:28

謝謝你的幫助。儘管如此，我仍然試圖將它與我自己的項目整合起來，但似乎無法使其發揮作用。我並不真正瞭解jQuery，我只是試圖在Rails項目中實現這一個jQuery特性。 – roguerat 2015-02-09 19:17:21

jQuery UI：如何保存「可排序」？

回答

相關問題