Question

我使用http://johnny.github.io/jquery-sortable/

我无法理解如何发送序列化数据？

我的HTML

<ul>
    <li data-id="1">Item 1</li>
    <li data-id="2">
        Item 2
        <ul>
            <li data-id="4">Item 4</li>
            <li data-id="5">Item 5</li>
        </ul>
    </li>
    <li data-id="3">Item 3</li>
</ul>

JS

$(function  () {
    $("ul#menuList").sortable({
        handle: 'i.icon-move',
        itemSelector: 'li',
        placeholder: '<li class="placeholder"/>',
        onDrop: function (item, container, _super)
        {
            //var dataToSend = $("ul#menuList").sortable("serialize").get();

            $.ajax({
                url: "ajax_action.php",
                type: "post",
                data: dataToSend,
                cache: false,
                dataType: "json",
                success: function()
                {}
            });
            //_super(item, container);
        }
    });
});

我按照this question中的描述进行了尝试，但它不适用于 ul-＆gt; li

我需要一个数组

[0] => Array
(
    [id] => 1
)
[1] => Array
(
    [id] => 2
    [children] => Array
    (
        [0] => Array
        (
            [id] => 4
        )
        [1] => Array
        (
            [id] => 5
        )
    )
)
[2] => Array
(
    [id] => 3
)

我很感激你的帮助。

Answer 1

我今天试图解决完全相同的问题。这是我提出的解决方案。它应该以您上面描述的确切形式给出一个数组。

$(function  () {
  $("ul#menuList").sortable({
    serialize: function ($parent, $children, parentIsContainer) {
      var result = $.extend({}, {id:$parent.attr('id')});
      if(parentIsContainer)
        return $children
      else if ($children[0]) 
        result.children = $children
      return result

    }, 
    onDrop: function ($item, container, _super) {
        // default
        $item.removeClass("dragged").removeAttr("style")
        $("body").removeClass("dragging")
        // END - default

        var dataToSend = $("ul#menuList").sortable("serialize").get();

        //console.log(dataToSend);

        $.ajax({
            url: "ajax_action.php",
            type: "POST",
            data: {"sortedList":dataToSend},
            cache: false,
            dataType: "json",
            success: function () {}
        });
        //_super(item, container);
    }
  })
})

Answer 2

您需要更改serialize功能。看这里http://jsfiddle.net/985Mg/

该插件允许在一个列表项中使用多个嵌套列表。因此，您在默认数据序列化中获得了一个额外的级别。

如何使用序列化并发送ajax（johnny sortable插件）

2 个答案: