Question

我有一个带有可拖动和可拖动行的GridView。我正在使用tableDnD来实现这一目标。拖放部分工作正常。我面临的问题是，当我需要将重新排序的网格数据保存回数据库时，我会尝试获取数据。我的代码如下所示：

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

目前我正在测试当我点击“保存”按钮时是否可以获取数据。

问题是当我在重新排序行之前点击按钮时，它工作正常。正在调用该方法并显示警报消息。但是，如果我在重新排序行后按下按钮，则按钮不执行任何操作，并且不会调用该方法。

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

任何帮助将不胜感激！

以下链接帮我构建了这个：

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

我的帖子有点晚了。我相信你现在已经提出了另一种解决方案。但是，我想我会补充一点，我也遇到了同样的问题，并认为我会用自己的战斗做出贡献。

最初，我在更新面板内部使用了gridview。当我使用tablednd移动一行时，结果将正确返回到重新排序。我正在使用类似于你拥有的Ajax和webmethods。我会使用webmethod进行拆分，以获得每行的Id和新的SortOrder并进行批量更新。

然而，问题是网格在呈现新的排序后不再允许你移动任何东西，我会触发一个隐藏的asp按钮重新填充网格的点击事件。

正在使用隐藏按钮，因为Webmethod只能处理重新排序，并且必须调用隐藏按钮才能重新绑定gridview。所以，我最终得到了以下内容。

 $(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 - 它解决了更新面板中发生的部分回发问题，影响了继续拖动行的能力。关键是这个

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

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

使用TableDnD拖放GridView行

1 个答案: