如何将 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中文网其他相关文章！