Question

这是此问题的延续：jQuery UI Sortable, then write order into a database

问题如下：

我想使用jQuery UI sortable函数来允许用户设置订单然后进行更改，将其写入数据库并进行更新。有人可以写一个如何做到这一点的例子吗？

由于我需要能够快速重新排序，我认为这非常有用。但是，已接受的解决方案存在很大问题。我在这里引用答案：

这是一个快速示例，只要元素有更改位置，就会将数据发送到指定的URL。
$('#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'
        });
    }
});
这样做是因为它使用元素id创建了一个元素数组。所以，我通常做这样的事情：
<ul id="sortable">
   <li id="item-1"></li>
   <li id="item-2"></li>
   ...
</ul>
当你使用serialize选项时，它会创建一个POST查询字符串，如下所示：item [] = 1＆amp; item [] = 2等等。所以，如果你在id属性中使用 - 例如 - 你的数据库ID，然后，您可以简单地遍历POSTed数组并更新元素＆＃39;相应的职位。

例如，在PHP中：
$i = 0;

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

这个解决方案的问题是：它不仅每次移动一个项目时都会更新一次，但它也有一些＆＃34;存储＆＃34;其他更新并在您创建之前执行它们。因此，例如，如果您移动4个项目，它将更新1 + 2 + 3 + 4次，导致更多可能的错误，并且如果您需要管理大量项目，则会使网页变慢。

我的问题很简单：为什么会这样？我怎么能避免这种情况？

Answer 1

答案确实非常简单（感谢Lucas Krupinski）。事实上，所需要的只是添加一个按钮或类似的东西，并让它处理更新。

让我们想象一下，我添加了一个onclick="save()"的按钮。如果我们保留这样的代码：

$( function() {
    $( "#sortable" ).sortable();
    $( "#sortable" ).disableSelection();
} );

function save(){
    var order = $("#sortable").sortable('serialize');
    console.log("order: " + order);
    $.ajax({
        data: order,
        type: 'POST',
        url: '/your/url/here'
    });
}

我们将看到该脚本仅按我们现在的顺序执行一次，从而避免性能降级和订单错误。

为什么jQuery.sortable的这个ajax多次执行更新？

1 个答案: