jQuery UI Sortable 的 `serialize` 方法如何用於資料庫更新？

如何利用jQuery UI Sortable 來管理訂單和資料庫更新

利用jQuery UI 的sortable 功能，使用者可以建立和修改訂單的順序元素。這就提出瞭如何將這些變更轉化為資料庫更新的問題。

解：

jQuery UI 為此提供了寶貴的序列化方法。它毫不費力地產生一個元素數組，每個元素都由其 ID 表示。

這是一個綜合範例，在元素重新排列時將資料分派到指定的URL：

$('#element').sortable({
    axis: 'y',
    update: function (event, ui) {
        var data = $(this).sortable('serialize');

        // Communicate with the server using $.post or $.ajax
        $.ajax({
            data: data,
            type: 'POST',
            url: '/your/url/here'
        });
    }
});

此程式碼建立了一個可排序的物件list，當元素的位置發生變更時觸發更新事件，並將排序後的ID 收集到一個陣列中。

通常，元素將資料庫 ID 嵌入到其屬性中。 Serialize 函數產生類似 item[]=1&item[]=2 的 POST 查詢字串，使用這些 ID 來編碼順序。

在PHP 域中，一個簡單的循環可以遍歷這個接收到的數組並執行資料庫更新相應地：

$i = 0;

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

要可視化此過程的實際效果，請探索jsFiddle 上的範例。

以上是jQuery UI Sortable 的 `serialize` 方法如何用於資料庫更新？的詳細內容。更多資訊請關注PHP中文網其他相關文章！