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

发布于 2024-12-09 02:20:29 字数 944 浏览 1 评论 0原文

目前我正在使用表拖放插件（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);
            }
        });
}

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

原文

Currently I am using the table Drag and Drop plugin (http://www.isocra.com/2008/02/table-drag-and-drop-jquery-plugin/) to achieve the drag and drop functionality in my GridView rows.

Probably, I will have to handle the Drop event and send the new row order to the server but I do not have a clue about how to do that.

Bare in mind the row order represents the priority of the records displayed in the GridView. Therefore, the new row order will be stored in the database after the Drop event.

This is the jquery code:

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);
            }
        });
}

I'd massively appreciate if someone could guide me to find a solution to this requirement.

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

临走之时 2024-12-16 02:20:29

在 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 调用中添加成功和错误处理程序。

onDrop event you can make an ajax call and send debugStr to the server to update the new row order. something like

$("#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
      }
    });
  }
});

If required you can add success and error handlers in the ajax call.

回复收藏 0 原文