如何使用序列化和發送AJAX（約翰尼排序插件）

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->裏工作

我需要得到一個陣列

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

我將不勝感激您的幫助。

Answer 1

您需要更改serialize函數。看看這裏http://jsfiddle.net/985Mg/

該插件允許在一個列表項中有多個嵌套列表。因此，您在默認數據序列化中會獲得一個額外的級別。

Answer 2

我正試圖解決今天完全相同的問題。這是我想出的解決方案。它應該以上述的確切形式給出一個數組。

$(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); 
    } 
    }) 
})