如何將使用可排序 jQuery UI 所做的變更保留到資料庫？

jQuery UI 可排序：將順序變更保留到資料庫

當使用jQuery UI 可排序功能允許使用者重新排列元素時，通常會出現以下情況：希望將新訂單儲存到資料庫中。以下是實現此目的的方法：

jQuery UI 可排序功能為此目的提供了一個序列化方法。它使用元素的 ID 來建立一個元素數組。例如，這樣的列表：

<code class="html"><ul id="sortable">
  <li id="item-1"></li>
  <li id="item-2"></li>
  ...
</ul></code>

當觸發序列化方法時，它會產生如下的POST 查詢字串：

item[]=1&item[]=2

假設每個元素的ID 都對應於資料庫ID，您可以迭代POSTed 陣列並更新資料庫中元素的位置。

這是PHP 中的範例：

<code class="php">$i = 0;

foreach ($_POST['item'] as $value) {
  // Execute statement:
  // UPDATE [Table] SET [Position] = $i WHERE [EntityId] = $value
  $i++;
}</code>

要在變更時啟動序列化和順序更新，使用下列jQuery 程式碼：

<code class="javascript">$('#element').sortable({
  axis: 'y',
  update: function (event, ui) {
    var data = $(this).sortable('serialize');

    // POST to server using $.post or $.ajax
    $.ajax({
      data: data,
      type: 'POST',
      url: '/your/url/here'
    });
  }
});</code>

此程式碼使用更新的訂單建立POST 請求並將其傳送到指定的URL。

以上是如何將使用可排序 jQuery UI 所做的變更保留到資料庫？的詳細內容。更多資訊請關注PHP中文網其他相關文章！