使用 TableDnD 拖放 GridView 行

Posted 2023-04-13

【中文标题】使用 TableDnD 拖放 GridView 行

【英文标题】：Drag and Drop GridView Rows using TableDnD

【发布时间】：2014-05-15 10:57:33

【问题描述】：

我有一个带有可拖放行的 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

【问题讨论】：

你有想过这个吗？

【参考方案1】：

我的帖子有点晚了。我敢肯定，到目前为止，您已经提出了替代解决方案。但是，我想我要补充一点，我也遇到了同样的问题，并认为我会为自己的战斗做出贡献。

最初，我将网格视图放在更新面板中。当我使用 tablednd 移动一行时，只要重新排序，结果就会正确返回。我正在使用与您所拥有的类似的 Ajax 和 webmethods。我会使用 webmethod 进行拆分，以获取每行的 Id 和新的 SortOrder 并进行大规模更新。

然而，问题是网格在呈现新排序后不再允许您移动任何内容，我将触发一个隐藏的 asp 按钮的单击事件以重新填充网格。

正在使用隐藏按钮，因为 Web 方法只能处理重新排序，并且必须调用隐藏按钮来重新绑定 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);

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