jQuery 序列化顺序似乎是随机的

Question

在我看来，JQuery UI 中的序列化返回的值不是我看到的顺序。据我所知，数组是随机顺序的，所以我不能按照我想要的顺序对其进行排序。

用例是一个用于重新排序的拖放表。在我拖动一行后，它会按预期重新排序表格。但是，一旦我拖动，序列化值似乎是随机的。因此，如果我将某些内容移至 item-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

我认为您的 foreach 循环中有 $id 和 $order 倒退。参数的索引反映了它们在排序列表中的位置，值是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（而不是随机或连续的、不相关的数字）
• 来自$_POST 的foreach 循环应该列出您的排序顺序，然后是您在数据库中的实际ID。