javascript - 使用拖放时如何在服务器端获取新的 GridView 行顺序？

Question

目前我正在使用表格拖放插件(http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/)来实现我的拖放功能GridView 行。

可能，我必须处理 Drop 事件并将新的行顺序发送到服务器，但我不知道如何做到这一点。

请记住，行顺序代表 GridView 中显示的记录的优先级。因此，新的行顺序将在 Drop 事件之后存储在数据库中。

这是 jquery 代码:

function load_lazyload() {
        $("#ContentPlaceHolder1_GridView").tableDnD({
            onDragClass: "GbiHighlight",
            onDrop: function (table, row) {
                var rows = table.tBodies[0].rows;
                var debugStr = "Row dropped was " + row.id + ". New order: ";
                for (var i = 0; i < rows.length; i++) {
                    debugStr += rows[i].id + " ";
                }
                $("#debugArea").html(debugStr);
            },
            onDragStart: function (table, row) {
                $("#debugArea").html("Started dragging row " + row.id);
            }
        });
}

如果有人能够指导我找到满足此要求的解决方案，我将非常感激。

Answer 1

在 onDrop 事件中，您可以进行 ajax 调用并将 debugStr 发送到服务器以更新新的行顺序。类似的东西

$("#ContentPlaceHolder1_GridView").tableDnD({
  onDrop: function(table, row) {
    var rows = table.tBodies[0].rows,
        newOrder = '';
    for (var i = 0; i < rows.length; i++) {
         newOrder += rows[i].id + " ";
    }

    $.ajax({
      url: 'server_method',
      data: {
        newOrder: newOrder
      }
    });
  }
});

如果需要，您可以在 ajax 调用中添加成功和错误处理程序。