jQuery UI可排序，然后将顺序写入数据库

php jquery jquery-ui mysql jquery-ui-sortable

2022-08-30 07:03:25

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

答案 1

jQuery UI 可排序功能包括一个序列化方法来执行此操作。这很简单，真的。下面是一个快速示例，该示例在元素位置发生更改后立即将数据发送到指定的 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>

当您使用该选项时，它将创建一个 POST 查询字符串，如下所示：等。因此，如果您在属性中使用了数据库 ID，则可以简单地循环访问 POSTed 数组并相应地更新元素的位置。serializeitem[]=1&item[]=2id

例如，在 PHP 中：

$i = 0;

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

jsFiddle上的示例。

答案 2

认为这可能也会有所帮助。A）它被设计为在每次排序后发送回服务器时将有效载荷保持在最低限度。（而不是每次都发送所有元素或迭代服务器可能退出的许多元素）B）我需要在不影响元素id/名称的情况下发回自定义ID。此代码将从 asp.net 服务器获取列表，然后在排序时仅发回 2 个值：已排序元素的 db id 和删除它的元素旁边的 db id。基于这 2 个值，服务器可以轻松识别新位置。

<div id="planlist" style="width:1000px">
    <ul style="width:1000px">
       <li plid="listId1"><a href="#pl-1">List 1</a></li>
       <li plid="listId2"><a href="#pl-2">List 1</a></li>
       <li plid="listId3"><a href="#pl-3">List 1</a></li>
       <li plid="listId4"><a href="#pl-4">List 1</a></li>
    </ul>
    <div id="pl-1"></div>
    <div id="pl-2"></div>
    <div id="pl-3"></div>
    <div id="pl-4"></div>
</div>
<script type="text/javascript" language="javascript">
    $(function () {
        var tabs = $("#planlist").tabs();
        tabs.find(".ui-tabs-nav").sortable({
            axis: "x",
            stop: function () {
                tabs.tabs("refresh");
            },
            update: function (event, ui) {
                //db id of the item sorted
                alert(ui.item.attr('plid'));
                //db id of the item next to which the dragged item was dropped
                alert(ui.item.prev().attr('plid'));

                //make ajax call
            }
        });
    });
</script>