使用TableDnD拖放GridView行

Question

我有一个带有可拖放的行的GridView。我正在使用tableDnD来完成这项工作。拖放部分工作正常。我面临的问题是，当我试图获取重新排序的网格的数据时，我需要将其保存回DB。我的代码如下所示：

<script type="text/javascript">
    var strorder;

    function reorder(table, row) {
        if (!table)
            table = $("#<%= gdvSteps.ClientID %>")[0];

        var rows = table.tBodies[0].rows;
        var step = 1;
        for (var i = 0; i < rows.length; i++) {
            strorder = strorder + $(".orderbox", rows[i]).html + "|";
            $(".orderbox", rows[i]).html(step++);
            strorder = strorder + $(".orderbox", rows[i]).html + ";";
        }
    }

    $(document).on('click', '#<%=btnSave.ClientID %>', function () {
        $.ajax({
            type: "POST",
            url: "Test_Grid.aspx/GridViewReorders",
            data: '{"Reorder":"' + strorder + '"}',
            contentType: "application/json; charset=utf-8",
            dataType: "json",
            async: true,
            cache: false,
            success: function (msg) {
                alert("successful!" + msg.d);
            }
        })
        return false;
    });

    $(document).ready(function () {
        $("#<%= gdvSteps.ClientID %>").tableDnD({
            dragHandle: ".dragHandle",
            onDrop: reorder
        });            

        $("#<%= gdvSteps.ClientID %> tr").hover(function () {
            $(this.cells[0]).addClass('showDragHandle');
        }, function () {
            $(this.cells[0]).removeClass('showDragHandle');
        });
    });

</script>

<div>
<asp:GridView ID="gdvSteps" runat="server" OnRowEditing="gdvSteps_RowEditing"
 OnRowUpdating="gdvSteps_RowUpdating" OnRowCancelingEdit="gdvSteps_RowCancelingEdit"
    AutoGenerateColumns="false">
    <Columns>
        <asp:ImageField ItemStyle-CssClass="dragHandle">
        </asp:ImageField>
        <asp:BoundField DataField="Step" HeaderText="P" ItemStyle-CssClass="orderbox" ItemStyle-Width="10px" />
        <asp:TemplateField HeaderText="Sistem">
            <ItemTemplate>
                <asp:Label ID="lblSistem" runat="server" Text='<%# Bind("Sistem") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:DropDownList ID="ddlSistem" runat="server" DataTextField="SUP_MCH_CODE" DataValueField="SUP_MCH_CODE"
                    OnSelectedIndexChanged="ddlSistem_SelectedIndexChanged" AutoPostBack="true">
                </asp:DropDownList>
            </EditItemTemplate>
            <ItemStyle Width="40px" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Box">
            <ItemTemplate>
                <asp:Label ID="lblBox" runat="server" Text='<%# Bind("Box") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:DropDownList ID="ddlBox" runat="server" DataTextField="MCH_CODE" DataValueField="OBJID">
                </asp:DropDownList>
            </EditItemTemplate>
            <ItemStyle Width="40px" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Job">
            <ItemTemplate>
                <asp:Label ID="lblJob" runat="server" Text='<%# Bind("Job") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:DropDownList ID="ddlJob" runat="server" DataTextField="Job" DataValueField="IDJob">
                </asp:DropDownList>
            </EditItemTemplate>
            <ItemStyle Width="300px" />
            <FooterStyle HorizontalAlign="Left" />
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Observations">
            <ItemTemplate>
                <asp:Label ID="lblObservations" runat="server" Text='<%# Bind("Observations") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:TextBox ID="txtObservations" runat="server" DataTextField="Observations" DataValueField="Observations">
                </asp:TextBox>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="Executant">
            <ItemTemplate>
                <asp:Label ID="lblExecutant" runat="server" Text='<%# Bind("Executant") %>'></asp:Label>
            </ItemTemplate>
            <EditItemTemplate>
                <asp:DropDownList ID="ddlExecutant" runat="server" DataTextField="Executant" DataValueField="IDExecutant">
                </asp:DropDownList>
            </EditItemTemplate>
            <ItemStyle Width="250px" />
            <FooterStyle HorizontalAlign="Left" />
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:ImageButton ID="btnEdit" runat="server" CausesValidation="False" CommandName="Edit"
                    ImageUrl="~/Imagenes/Edit.png" Text="Edit" />
            </ItemTemplate>
            <EditItemTemplate>
                <table>
                    <tr>
                        <td>
                            <asp:ImageButton ID="btnUpdate" runat="server" CausesValidation="True" ImageUrl="~/Imagenes/Ok.png"
                                CommandName="Update" Text="Update"></asp:ImageButton>
                        </td>
                        <td>
                            <asp:ImageButton ID="btnCancel" runat="server" CausesValidation="False" ImageUrl="~/Imagenes/Cancel.png"
                                CommandName="Cancel" Text="Cancel"></asp:ImageButton>
                        </td>
                    </tr>
                </table>
            </EditItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField ShowHeader="False">
            <ItemTemplate>
                <asp:ImageButton ID="btnDelete" runat="server" CausesValidation="False" CommandName="Delete"
                    ImageUrl="~/Imagenes/Delete.png" Text="Delete" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>
<asp:Button ID="btnSave" runat="server" Text="Save" />
</div>

我要调用的代码背后的函数是：

[WebMethod]        
public static string GridViewReorders(string Reorder)
{        
    return Reorder.Split(';')[0];
}

目前，我只是测试一下，当我点击Save按钮时，我是否可以获得数据。

问题是，当我在重新排序行之前点击按钮时，它工作得很好。正在调用该方法，并且正在显示警报消息。但是如果我在重新排序行之后点击按钮，按钮什么也不做，方法也不会被调用。

我不知道这是否是恢复重新排序的行的数据的最佳方法。我不知道为什么按钮或方法在重新排序后停止工作。

任何帮助都将不胜感激！

以下是帮助我构建这篇文章的链接：

http://isocra.com/2008/02/table-drag-and-drop-jquery-plugin/

http://aspdotnet-example.blogspot.com.ar/2011/10/gridview-reorder-row-drag-and-drop.html

Answer 1

我到你的岗位有点晚了。我相信到目前为止，你已经想出了一个替代方案。但是，我想我应该补充说，我也有与您相同的问题，并认为我将为我自己的战斗做出贡献。

最初，我将我的网格视图放在一个updatepanel中。当我使用tablednd移动一行时，结果会在重新排序时正确返回。我使用的Ajax和webmethods与您使用的类似。我将使用webmethod进行拆分，以获取每行的Id和新的SortOrder，并进行批量更新。

然而，问题是，网格不再允许你移动任何东西，因为它呈现了新的顺序，我会触发一个隐藏的asp按钮的click事件来重新填充网格。

之所以使用隐藏按钮，是因为Webmethod只能处理重新排序，并且必须调用隐藏按钮来重新绑定网格视图。因此，我在下面总结了这一点。

 $(document).ready(function ()
    {
        $('#gvLocations').tableDnD({
            onDrop: function (table, row)
            {
                var serialize = $.tableDnD.serialize();//$('#gvLocations').tableDnDSerialize();

                $.ajax({
                    type: "POST",
                    url: "RowsUpDownOrDragging.aspx/RowOrderSerialize",
                    data: "{sortedIDs: '" + serialize + "'}",
                    contentType: "application/json; charset=utf-8",
                    dataType: "json",
                    success: OnSuccess
                });
            }
        });

        function OnSuccess()
        {
            location.reload();
            //$("#ReloadThePanel").trigger("click");  //hidden button
        }
    });

当我注释掉/移除UpdatePanel包装器时，我能够对网格重新排序，而不会丢失tablednd功能。因此，对于部分重新绑定，似乎与tablednd产生了脱节。

无论如何，如果您仔细研究一下OnSuccess方法，我现在使用的是location.reload()，因为隐藏按钮变得过度杀伤力。我不高兴我必须做一个整页刷新。但是，通过这种方式，我的代码确实可以正常工作。

编辑:昨天发布了这篇文章后，我果然遇到了this website -它解决了updatepanel中发生的部分回发问题，影响了继续拖动行的能力。关键的一行是

 Sys.WebForms.PageRequestManager.getInstance().add_endRequest(gvLocations_LazyLoad);

一旦我开始使用它，我就可以进行部分更新，而不是重新加载整个页面。