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

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

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在你的数据库。

Answer 2

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

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