使用 jQuery UI 可排序将订单写入数据库

jQuery UI 可排序是一款非常常用的 jQuery 插件，它能够为你的页面添加可排序功能。在本文中，我们将介绍如何使用 jQuery UI 可排序来创建一个简单的订单管理，以及如何将这些订单数据写入数据库中。

前置知识

在开始学习本教程之前，你需要掌握以下技能：

• 基本的 HTML 和 CSS
• jQuery 处理 DOM 中的元素和事件
• Ajax 与后台服务器通信

使用 jQuery UI 可排序创建可排序订单列表

首先，我们需要创建一个订单列表，使用 jQuery UI 可排序使其可排序，如下所示：

<ul id="order-list">
  <li class="order" data-id="1">
    <div class="order-number">Order #1</div>
    <div class="order-name">ABC Company</div>
    <div class="order-date">2021-01-01</div>
  </li>
  <li class="order" data-id="2">
    <div class="order-number">Order #2</div>
    <div class="order-name">XYZ Corporation</div>
    <div class="order-date">2021-02-02</div>
  </li>
</ul>

我们使用了 <ul> 和 <li> 元素创建一个订单列表，每一个订单都有一个唯一的 data-id 属性。

将 jQuery UI 可排序应用到这个订单列表中非常简单：

$('#order-list').sortable();

现在，你可以尝试拖动订单，它们应该可以被排序了。

将排序后的订单写入数据库

接下来，我们需要一个后端服务器将排序后的订单数据写入数据库中。我们可以使用 Ajax 向服务器发送请求。

为了向服务器发送请求，我们需要编写一个函数，如下所示：

function saveOrder() {
  var orderIds = [];
  $('#order-list li').each(function() {
    orderIds.push($(this).data('id'));
  });
  $.ajax({
    url: '/save-order',
    method: 'post',
    data: {
      orderIds: orderIds
    },
    success: function(data) {
      console.log('Order saved successfully');
    },
    error: function(xhr, status, error) {
      console.log('Order save error: ' + error);
    }
  });
}

这个函数会遍历整个订单列表，并将每一个订单的 data-id 属性值存储到一个数组中。然后，它会向服务器发送一个 POST 请求，并将订单 ID 数组发送给服务器。服务器将使用这些订单 ID 将订单排序信息写入数据库中。

在这个例子中，我们将请求发送到 /save-order 路由。你需要根据你的后端服务器的具体实现来调整这个 URL。

连接可排序列表和保存函数

最后，我们需要将可排序列表和保存函数连接在一起。为此，我们需要监听可排序列表的排序事件，并在排序结束后调用 saveOrder() 函数。

$('#order-list').sortable({
  stop: function(event, ui) {
    saveOrder();
  }
});

现在，当我们拖拽完一个订单并松开鼠标，订单将被重新排序，并向服务器发送一个请求。

结论

本文中，我们介绍了如何使用 jQuery UI 可排序来创建一个简单的订单管理，并将排序后的订单数据写入数据库中。这个例子非常简单，但它展示了如何使用可排序列表和 Ajax 请求实现一个实际的需求。