如何將 jQuery UI Sortable 與資料庫整合以維持順序？

jQuery UI Sortable 和資料庫整合

使用 jQuery UI Sortable，您可以讓使用者重新排列元素並保持特定順序。若要將此功能與資料庫集成，您可以結合使用序列化方法和 AJAX 或表單提交。

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

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

透過利用HTML 結構，例如：

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

序列化方法將產生一個查詢字串，例如：item[]=1&item[]=2，其中每個值代表重新排列的元素的ID。

假設您的資料庫 ID 與元素 ID 匹配，則可以循環遍歷POST 資料並使用新位置更新相應的資料庫記錄。

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

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

將 jQuery UI Sortable 與資料庫整合可讓您動態維護物件的順序，為排序和持久化提供使用者友善的介面。

以上是如何將 jQuery UI Sortable 與資料庫整合以維持順序？的詳細內容。更多資訊請關注PHP中文網其他相關文章！