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：如何保存“可排序”？

回答

相关问题