johnny sortable:如何使用sort.sortable("serialize");

问题描述

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

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

使用此插件，您可以更改列表的顺序或表行的顺序(这就是我的情况).例如，使用鼠标将第四行拖动到第二个位置.宽度为插件方法 sort.sortable("serialize")您可以访问新订单.

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.

但是如何使用 sort.sortable("serialize")?

您可以在此处找到示例: http://johnny.github.io/jquery-sortable/#table 我想将表行的新顺序发送到myurl.php.

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

如何使用 sortable("serialize")通过 $.post 将新订单发送到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:

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

推荐答案

要通过$ .POST发送新订单，只需执行以下操作:

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

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

在ajax-sort.php上，您收到类似以下内容的信息:

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 ...
                        )
                )
        )
)

如果要更改此数组的结构，请覆盖插件中的 serialize()方法.

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

您将在此处找到自定义的serialize()方法的示例: http://johnny.github.io/jquery-sortable/#limited-target

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

这篇关于johnny sortable:如何使用sort.sortable("serialize");的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持！