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

正如Henrique的評論一樣，Barmar的回答是解決方案的一部分。 我肯定混合了數組，但在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編號，那么HTML中的ID應該是您的數據庫編號（而不是一個隨機或順序的無關編號）
• $_POST的foreach循環應列出您的排序順序，然后列出您數據庫中的實際ID。