JQuery UI Sortable:使用排序顺序保存密钥

时间:2015-06-30 06:09:58

标签: javascript php jquery jquery-ui sorting

我正在使用此代码来保存我的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脚本以及已排序的数字。救命啊!

2 个答案:

答案 0 :(得分:1)

谢谢,dfsq!我也找到了Array,如果你只需要钥匙就行。

$(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 :(得分:0)

您可以使用键作为名称属性和元素的值索引手动构建数据对象(加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['normal'] = 1等的POST数组

或者,您可以将项目作为项目的一部分传递&#34;嵌套&#34;阵列:

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

并拥有像$_POST['item']['normal'] = 1这样的POST数组。