Geek asks and answers

Johnny sortable: how to use sort.sortable ("serialize");

I use: http://johnny.imtqy.com/jquery-sortable/

With this plugin, you can change the order of the list or the row order of the table (this is my case). For example, using the mouse, you drag the fourth row to the second position. The width of the plugin method sort.sortable ("serialize") . You have access to a new order.

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

Here you will find an example: http://johnny.imtqy.com/jquery-sortable/#table I would like to send a new row order for the myurl.php table.

How to use sort ("serialize") to send a new order using $. post on 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(){});
});
0
source share
3 answers

If the table rows are pre-sorted using this plugin, you can iterate over the rows and add their identifier to the 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 blahin braces to indicate that this is an object. Otherwise, you would get a syntax error.

0
source

To send a new order via $ .POST, simply do:

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

In ajax-sort.php you will get something like:

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

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

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

                            ... snip ...
                        )
                )
        )
)

, serialize() .

serialize(): http://johnny.imtqy.com/jquery-sortable/#limited-target

0

I created a script that will sort and convert the output to 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));
}
0
source

More articles:


All Articles