0

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

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

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

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

如何使用sortable("serialize")通过$.post将新订单发送到 php 脚本？

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

3 回答 3

1

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

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

在 ajax-sort.php 上，您会收到如下信息：

[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.github.io/jquery-sortable/#limited-target

于 2013-05-02T08:52:56.363 回答
0

如果使用该插件对表行进行了预排序，则可以遍历行并将它们的 id 添加到数组中。

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

我还用blah花括号括起来表示它是一个对象。否则你会得到一个语法错误。

于 2013-05-01T17:05:12.010 回答
0

我创建了一个脚本，它将对输出进行排序并将其转换为 json 格式：

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));
}
于 2016-06-13T19:49:28.030 回答