jQuery UI:如何保存"可排序”;

jQuery UI: How to save "sortable"?

本文关键字：quot 排序 保存 UI 何保存 jQuery      更新时间：2023-09-26

我有一个"任务"列表，我使用"可排序"，这样用户就可以对它们进行优先级排序，将最重要的任务放在首位。当然，每次刷新页面时，它们都会返回到原来的位置。我想知道是否可以保存任务的位置？

这是我的代码（这是一个铁路项目）：

<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 !@project.tasks.blank? %>
  <% 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>

您可以使用jQuery cookie，并使用jQuery UI可排序的toArray:获得li位置

将可排序项的项id序列化为字符串数组。

则在负载中通过使用CCD_ 3和CCD_。

代码：

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。

您可以找到任务的索引并保存它，并在显示时根据索引进行排序。

要在UI上找到任务的索引，请参阅：Fiddle

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