JQuery UI可排序:按排序顺序保存键 - JQuery UI Sortable: Save keys with sort order

JQuery UI Sortable: Save keys with sort order

本文关键字：排序顺序保存 UI JQuery | 更新日期: 2023-09-27

我正在使用此代码保存JQuery UI排序顺序：

$(function() {
    $('#sortable').sortable({
    update: function (event, ui) {
        var data = $(this).sortable('serialize');
        $.ajax({
            data: data,
            type: 'POST',
            url: '/sort.php'
            });
        }
    });
    $( "#sortable" ).disableSelection();
});

这将生成一个数字数组。假设我还想根据列表项中的标记，将密钥和数字一起保存。

例如，一个排序列表，如：

<ul id='sortable'>
<li id='item-3' name='special'><image src='special.jpg'></li>
<li id='item-1' name='normal'><image src='normal.jpg'></li>
<li id='item-2' name='extraordinary'><image src='extraordinary.jpg'></li>
</ul>

将在PHP:中生成此数组

$item['special'] = 3;
$item['normal'] = 1;
$item['extraordinary'] = 2;

我知道如何使用JQuery访问标记，但不知道如何将这些标记序列化为数组，并将其与排序后的数字一起传递给我的PHP脚本。帮助

谢谢，dfsq！我还发现了toArray，如果你只需要密钥，它就可以工作。

$(function() {
    $('#sortable').sortable({
    update: function (event, ui) {
        var data = $(this).sortable('toArray', {attribute: 'data-name'});
        //alert(data);
        $.ajax({
            data: {data:data},
            type: 'POST',
            url: 'post.php'
            });
        }
    });
    $( "#sortable" ).disableSelection();
});

您可以手动构建数据对象，其中键作为元素的名称属性和值索引（加1，它是从零开始的）：

$('#sortable').sortable({
    update: function (event, ui) {
        var data = {};
        $('#sortable').children().each(function() {
            data[$(this).attr('name')] = $(this).index() + 1;
        });
        $.ajax({
            data: data,
            type: 'POST',
            url: '/sort.php'
        });
    }
});
$("#sortable").disableSelection();

然后在服务器上，您将拥有POST阵列，如$_POST['normal'] = 1等。

或者，您可以将项目作为项目"嵌套"数组的一部分进行传递：

data['item[' + $(this).attr('name') + ']'] = $(this).index() + 1;

并且具有类似于CCD_ 2的POST阵列。