jquery – 使用拖放重新排列HTML表格行

我有一个jQuery函数来上下移动表行。我不知道如何保存数据，也不知道每行的位置。我正在使用PHP来显示表行。

当用户重新排列表行时，如何获取每个表行位置值？

解决方法

jQuery UI sortable plugin提供拖放重新排序。保存按钮可以提取每个项目的ID，以创建添加到隐藏文本框的这些ID的以逗号分隔的字符串。使用异步回发将文本框返回给服务器。

这个fiddle example重新排列表格元素，但不保存到数据库。

可排序的插件需要一行代码将任何列表转换为可排序的列表。如果您关心使用它们，它还提供CSS和图像，以便对可排序列表提供视觉冲击(请参阅我链接到的示例)。然而，开发人员必须提供代码来检索新订单中的项目。我将每个项目的唯一ID作为HTML属性嵌入列表中，然后通过jQuery检索这些ID。

例如：

// ----- code executed when the document loads
$(function() {
    wireReorderList();
});

function wireReorderList() {
    $("#reorderExampleItems").sortable();
    $("#reorderExampleItems").disableSelection();
}

function saveOrderClick() {
    // ----- Retrieve the li items inside our sortable list
    var items = $("#reorderExampleItems li");

    var linkIDs = [items.size()];
    var index = 0;

    // ----- Iterate through each li,extracting the ID embedded as an attribute
    items.each(
        function(intIndex) {
            linkIDs[index] = $(this).attr("ExampleItemID");
            index++;
        });

    $get("<%=txtExampleItemsOrder.ClientID %>").value = linkIDs.join(",");
}