如何保存 jquery sortable 的排序顺序 - Javascript

在开发 web 应用程序时，我们经常需要对可排序的项目列表进行排序。使用 jquery sortable 插件可以轻松地实现在 web 应用程序中对项目进行排序。

在进行排序时，最常见的问题是如何保存排序的顺序。在本文中，我们将探讨如何保存 jquery sortable 的排序顺序，并将提供一些有用的代码片段，帮助你实现你的排序操作。

使用 localStorage 保存排序顺序

一种通用的方法是使用 localStorage 来保存排序顺序。localStorage 是浏览器提供的一种本地存储方式，可以保存键值对数据。你可以使用 localStorage 来存储 jquery sortable 的排序顺序。默认情况下，jquery sortable 可以通过将排序后的项目的 ID 存储为一个数组来保存排序的顺序。

以下代码演示了如何通过 sortable callbacks 来保存排序顺序：

$(function() {
  $("#sortable").sortable({
    update: function(event, ui) {
      var order = [];
      $("#sortable li").each(function(index) {
        order.push($(this).attr("id"));
      });
      localStorage.setItem("sortable-order", JSON.stringify(order));
    }
  });

  var order = localStorage.getItem("sortable-order");
  if (order) {
    order = JSON.parse(order);
    $("#sortable li").sort(function(a,b) {
      return order.indexOf($(a).attr("id")) - order.indexOf($(b).attr("id"));
    }).appendTo("#sortable");
  }
});

这段代码将在页面加载时检查 localStorage 中是否有排序顺序，如果有，则在排序后立即加载该顺序。

使用 Ajax 保存排序顺序

另一种方法是使用 Ajax 请求将排序顺序保存到服务器上。当进行排序时，可以通过 sortable 的 update 回调来触发 Ajax 请求。

以下代码演示了如何使用 Ajax 请求保存排序顺序：

$(function() {
  $("#sortable").sortable({
    update: function(event, ui) {
      var order = [];
      $("#sortable li").each(function(index) {
        order.push($(this).attr("id"));
      });
      $.ajax({
        type: "POST",
        url: "/save-order",
        data: { order: JSON.stringify(order) }
      });
    }
  });
});

这段代码将在进行排序时触发 Ajax 请求，并将排序顺序作为 POST 请求发送到 /save-order URL。在服务器上，您可以使用语言和框架来存储排序顺序。

总结

现在您已经知道如何保存 jquery sortable 的排序顺序了。您可以使用 localStorage 或 Ajax 进行保存。如果您需要在您的 web 应用程序中启用排序功能，我们建议您使用 jquery sortable 插件，它是一个非常强大和易于使用的排序库。