Question

在我看来，在JQuery UI中序列化返回的值不是我看到它们的顺序。我可以说，数组是随机顺序，因此我无法按照我想要的顺序对其进行排序。

用例是用于重新排序的拖放表。拖动一行后，它按预期重新排序表。但是，一旦我拖动，序列化值似乎是随机的。因此，如果我将某些内容移动到第2项，我希望它位于2.但是，有时它位于0阶，7阶或10阶。我如何捕获并重新排序表，然后将这些值传递给MySQL预期的订单？

这是我的javascript：

var fixHelperModified = function(e, tr) {
        var $originals = tr.children();
        var $helper = tr.clone();
        $helper.children().each(function(index) {
            $(this).width($originals.eq(index).width())
        });
        return $helper;
    },
    updateIndex = function(e, ui) {
        $('td.index', ui.item.parent()).each(function (i) {
            $(this).html(i + 1);
        });
    };

//noinspection JSUnresolvedFunction
$('#sortable').sortable({
    helper: fixHelperModified,
    axis: 'y',
    opacity: 0.5,
    cursor: 'move',
    stop: updateIndex,
    update: saveRows
}).disableSelection();

function saveRows(){
    var tableRows = $(this).sortable('serialize');

    // POST to server using $.post or $.ajax
    //noinspection JSUnresolvedVariable
    $.ajax({
        cache: false,
        url: "/plugins/site/themes/admin/ajaxUpdate.php",
        type: "POST",
        data: tableRows
    });
}

我的php更新MYSQL：

<?php
require_once($_SERVER["DOCUMENT_ROOT"] . "/cfg.php");
foreach ($_POST['rowsort'] as $id => $order){

    $sql = "UPDATE `categories` SET `order` = :categoryorder WHERE `id` = :categoryid;";
    $stmt = mySQL::getConnection()->prepare($sql);
    $stmt->bindParam(':categoryorder', $order);
    $stmt->bindParam(':categoryid', $id);
    $stmt->execute();
    $stmt->closeCursor();
}

我的HTML是一个包含id="rowsort-<?php echo $i; ?>"

的引导表

我知道serialize()默认使用id字段，所以我无法弄清楚为什么我无法获得一致的返回值。

Answer 1

我认为您的$id循环中有$order和foreach向后。参数的索引反映了它们在排序列表中的位置，值是rowsort-<number> ID中的数字。所以它应该是：

foreach ($_POST['rowsort'] as $order => $id) {
    ...
}

Answer 2

Barmar的答案是解决方案的一部分，Henrique的评论也是如此。我确实混淆了阵列，但是在javascript方面还有更多内容，而在HTML方面则更多，我完全拙劣：

这有效：

function saveRows(){
    var data = $('#sortable tr').map(function() { return {
        id: $(this).attr("rowsort") };
    });
    var tableRows = $(this).sortable('serialize');

    // POST to server using $.post or $.ajax
    //noinspection JSUnresolvedVariable
    $.ajax({
        cache: false,
        url: "/plugins/site/themes/admin/ajaxUpdate.php",
        type: "POST",
        data: tableRows
    });
}

问题是我需要在序列化之前进行排序。一旦我这样做，我就更接近了，但它仍然是不对的。在我的HTML中，我使用$i作为我的id，但我已经在数据库中有一个真正的id。更改上面的javascript然后使用id=rowsort-<?php echo category['id'];?>是真正的解决方案。

这个问题/经历对我帮助很大。对于其他任何发现排序成为未来问题的人：

在序列化之前排序，而不是在排序期间。
如果您有一个（而不是随机或顺序无关的数字），HTML中的ID应该是您的数据库ID
foreach中的$_POST循环应列出您的排序顺序，然后列出数据库中的实际ID。

jQuery Serialize命令似乎是随机的

2 个答案: