如何有条件地将jQuery Sortable UI小部件应用于表格（ASP.NET GridView）？

Question

我有以下代码，将jQuery UI Sortable插件应用于ASP.NET页面上的所有表格（GridView），但不包括每个表格的第一行（标题）：

function pageLoad() {
    $('table').sortable({
        items: 'tr:not(:first)',
        axis: 'y',
        scroll: true,
        start: startDrag, //store start position
        stop: stopDrag    //get end position, update database
    }).disableSelection();

如果表格中只有一个内容行（除了标题行），则拖放功能是多余的，因此我只想将sortable应用于具有多个行的表格。

如何仅对具有多个内容行的表格进行上述条件性应用？谢谢。

- Marcus Guinane

---

这太棒了，而且非常及时，因为我正需要像这样的东西。添加两个问题：1）startDrag未定义。我假设我需要在代码后台声明它，但数据类型是什么？2）我正在使用它来允许用户根据“order”列（int）重新排序有序列表。是否有一种有效的方法将其保存回数据库？ - nycdan

也许更好的问题是如何读取GridView中的新位置。当我交换项目0和1，并读取gridview1.Rows [0] .Cells [1] .Text时，它仍然显示原始项目。不确定如何读取每个位置中的排序后的项目。 - nycdan

您可以检查被拖动元素的常规jQuery index()，或使用sortable.serialize()导出完整的位置状态：http://jqueryui.com/demos/sortable/#method-serialize - James McCormack

@nycdan，请看下面我回答关于如何处理重新排序的内容。 - Marcus Guinane

@James McCormack 再次感谢您的帮助 :) - Marcus Guinane

Answer 1

jQuery的filter()提供了一种解决方案。它允许您使用测试函数过滤一组匹配的元素。因此，以下代码仅将sortable应用于具有多个数据行的表格：

function pageLoad() {

    $('table').filter(function () {
                        return $('tr', this).length > 2;
                      })
              .sortable({
                 items: 'tr:not(:first)',
                 axis: 'y',
                 scroll: true,
                 start: startDrag, //store start position
                 stop: stopDrag    //get end position, update database
                 })
              .disableSelection();
}

- James McCormack

Answer 2

针对nydcan上面的问题，startDrag方法如下：

 function startDrag(event, ui) {
    var startIndex = ui.item.index();
    ui.item.data('startIndex', startIndex);
}

而 stopDrag 方法看起来像这样：

function stopDrag(event, ui) {
    var startIndex = ui.item.data('startIndex');
    var endIndex = ui.item.index();
    if (startIndex != endIndex) {
        $.ajax({
            type: 'POST',
            url: '<%= ResolveUrl("~/MyPage.aspx/UpdateOrder") %>',
            contentType: 'application/json; charset=utf-8',
            data: "{ 'startIndex':'" + startIndex + "', 'endIndex':'" + endIndex + "'}",
            dataType: 'json',
            success: updateSuccess,
            error: updateError
        });
    }
}

我在我的页面上有一个像这样的 Web 方法（VB.NET）：

<System.Web.Services.WebMethod()>
Public Shared Sub UpdateRulePriority(ByVal startIndex As Integer, ByVal endIndex As Integer)

    'Do stuff

End Sub

希望这有所帮助。

- Marcus Guinane