johnny sortable: How to use sort.sortable(“serialize”);

问题

I use: http://johnny.github.io/jquery-sortable/

With this plugin you can change the order of a list or the order of table rows (thats my case). For example with the mouse you drag the fourth row to the second position. Width the plugin method sort.sortable("serialize") you have access to the new order.

But how to use sort.sortable("serialize") ?

You find an example here: http://johnny.github.io/jquery-sortable/#table I would like to send the new order of my table rows to myurl.php.

How to use sortable("serialize") to send the new order via $.post to the php script?

HTML:

<table class="tablesort">
<tbody>
<tr data-id="39"><td>item 1</td></tr>
<tr data-id="37"><td>item 2</td></tr>
<tr data-id="40"><td>item 3</td></tr>
<tr data-id="61"><td>item 4</td></tr>
</tbody>
</table>

JavaScript:

// Initialize the plugin
var sort = $(".tablesort").sortable({

  // After changing the order           
  onDrop: function ($item, container, _super) {
    var myObject = sort.sortable("serialize");

    // How to prepare *myObject* for sending?

    $.post('myurl.php', {blah:myObject}, function(){});
});

回答1:

If the table rows are pre-sorted using that plugin, you can iterate over the rows and add their id's to an array.

onDrop: function ($item, container, _super) {
    var myObject = sort.sortable("serialize");
    var sorted = [];

    $('tr').each(function () {
        sorted.push($(this).data('id'));
    });

    $.post('myurl.php', {blah: sorted}, function(){});
});

I also wrapped blah in curly braces to indicate that it is an object. Otherwise you would have gotten a syntax error.

回答2:

To send your new order via $.POST just do:

var dataToSend = sort.sortable("serialize").get();
$.post("ajax-sort.php", {test:dataToSend}, function(data){});

On ajax-sort.php you recieve something like:

[test] => Array
        (
            [0] => Array
                (
                    [children] => Array
                        (
                            [0] => Array
                                ([id] => 39)

                            [1] => Array
                                ([id] => 37)

                            [2] => Array
                                (
                                    [subContainer] => false
                                    [id] => 38
                                )

                            ... snip ...
                        )
                )
        )
)

If you want to change the structure of this array, override the serialize() method in the plugin.

You will find an example of a customized serialize() method here: http://johnny.github.io/jquery-sortable/#limited-target

回答3:

I have created a script which will sort and convert output into json format :

function start_sorting(classvariable){
var output=[];
var parent="";
var selector=$("."+classvariable+" li");
selector.each(function(key,value){
var id=selector.eq(key).attr('id');
var index=key;
        if(selector.eq(key).parent().parent().parent().find(">li").length==0){
        parent='0';
        }else{
        parent=selector.eq(key).parent().parent().parent().find(">li").attr('id');
        }
output.push({id:id,index:index,parent:parent});
});
console.log( JSON.stringify(output));
}

来源：https://stackoverflow.com/questions/16322656/johnny-sortable-how-to-use-sort-sortableserialize