使用 jqueryui sortable 对 Grid 中的记录进行排序答案

【问题标题】：Use jqueryui sortable to order records in Grid使用 jqueryui sortable 对 Grid 中的记录进行排序
【发布时间】：2011-12-08 08:38:36
【问题描述】：

我使用网格来显示主表记录列表，这些记录由我的 Web 应用程序中的下拉菜单使用。我们维护在下拉列表中显示项目时使用的 sortOrder 列。我想使用jQueryUI sortable plugin 来允许用户对网格中显示的记录进行重新排序。

我有一个 ASP.Net MVC(v2.0) 网络应用程序。捕获新订单并在数据库中更新它的最佳方式是什么？

我找到了一个类似的post for php。它使用“.sortable('toArray')”来获取元素，但我有一个网格。我是否必须将我的 Grid 简化为一个列表？

【问题讨论】：

你能提供一些你的html吗？本质上，无论您将其显示为网格还是列表，它都不应该有任何区别。这是应用了不同 css 的相同标记。

标签： jquery-ui-sortable

【解决方案1】：

我有一个可编辑的网格，所以我添加了一个新列“sortOrder”，其中包含文本框，每次用户拖动一行时，我都使用“update”事件来查找它并设置“this.rowIndex”。

希望以下功能有所帮助-

$("#sortable tbody").sortable({
    helper: fixHelper,
    cursor: 'move',

    update: function(e, ui) {
        $el = $(ui.item);
        $el.effect('highlight', {}, 2000);

        //Use for debug: alert($('#sortable tbody tr').length);

        $('#sortable tbody tr').each(
                function(currentIndex) {
                    $(this).find('td:nth-child(3)').find('input:first').val(this.rowIndex); //td:first
                });
    }
});

这是我找到我的文本框并设置其值的地方：

$(this).find('td:nth-child(3)').find('input:first').val(this.rowIndex);

【讨论】：