jQuery UI Sortable 和数据库集成

使用 jQuery UI Sortable，您可以让用户重新排列元素并保持特定的顺序。要将此功能与数据库集成，您可以结合使用序列化方法和 AJAX 或表单提交。

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

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

通过利用 HTML 结构，例如：

   

   

   ...

序列化方法将生成一个查询字符串，例如：item[]=1&item[]=2，其中每个值代表重新排列的元素的 ID。

假设您的数据库ID 与元素 ID 匹配，然后您可以循环遍历 POST 数据并使用新位置更新相应的数据库记录。

$i = 0;

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

将 jQuery UI Sortable 与数据库集成允许您动态维护对象的顺序，为排序和持久化提供用户友好的界面。