ASP.NET 使用带有展开/折叠功能的嵌套、可编辑 GridView 的 JQuery

Posted 2023-05-08

【中文标题】ASP.NET 使用带有展开/折叠功能的嵌套、可编辑 GridView 的 JQuery

【英文标题】：ASP.NET Using JQuery with nested, editable GridViews with expand/colapse features

【发布时间】：2020-06-08 11:44:07

【问题描述】：

我的应用程序的一部分使用嵌套的GridViews 来显示数据。我有客户的订单，每个订单包含 1 个或多个产品。现在，为了向用户展示数据，我使用了订单数据GridView，每行都有一个按钮，可以展开/折叠子Gridview。

在设计这个时，我遵循了这个页面上的教程：

https://www.aspsnippets.com/Articles/ASPNet-Nested-GridViews-GridView-inside-GridView-with-Expand-and-Collapse-feature.aspx

做了一些修改，因为我的情况有点不同（例如，我不使用数据库，因为数据是从外部 API 导入的）。

但是，问题在于，在原始代码中，子 GridView 数据只显示，而在我的解决方案中，它有一些 DropDownLists 允许用户编辑数据：

<asp:GridView ID="MainTable" runat="server" OnDataBound="MainTable_DataBound" AutoGenerateColumns="false" OnRowCommand="MainTable_RowCommand" class="w3-table w3-centered">
        <HeaderStyle CssClass="w3-blue" />
        <Columns>
            <asp:TemplateField>
                <ItemTemplate>
                    <a class="w3-btn w3-blue button" id="plus">+</a>
                    <asp:Panel ID="pnlOrders" runat="server" Style="display: none">
                        <asp:GridView ID="ProductsTable" runat="server" OnRowDataBound="ProductsTable_RowDataBound" AutoGenerateColumns="false" class="w3-table w3-striped">
                            <Columns>
                                <asp:BoundField DataField="Name" HeaderText="Nazwa" />
                                <asp:BoundField DataField="Indexer" Visible="false" />
                                <asp:TemplateField HeaderText="Parametr 1">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="DropDownList1" runat="server" class="w3-select w3-border"></asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Parametr 2">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="DropDownList2" runat="server" class="w3-select w3-border"></asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Parametr 3">
                                    <ItemTemplate>
                                        <asp:DropDownList ID="DropDownList3" runat="server" class="w3-select w3-border"></asp:DropDownList>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                <asp:TemplateField HeaderText="Usuń">
                                    <ItemTemplate>
                                        <a class="w3-btn w3-blue verify">V</a>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>
                    </asp:Panel>
                </ItemTemplate>
            </asp:TemplateField>
            <asp:BoundField DataField="ID" HeaderText="ID" />
            <asp:BoundField DataField="Client" HeaderText="Klient" />
            <asp:BoundField DataField="Phone" HeaderText="Telefon" />
            <asp:BoundField DataField="Comment" HeaderText="Komentarz" />
            <asp:TemplateField HeaderText="Zatwierdź">
                <ItemTemplate>
                    <asp:Button class="w3-btn w3-blue" Text="Zatwierdź" runat="server" CommandName="Verify" CommandArgument="<%# Container.DataItemIndex %>" />
                </ItemTemplate>
            </asp:TemplateField>
        </Columns>
    </asp:GridView>

现在，原始代码中使用的 JQuery 创建了子 GridView 的副本，当用户单击“-”按钮时，该副本将被删除。因此，我无法在代码中访问DropDownLists，并且不会保存用户所做的更改。我还发现子 GridView（.verify 类）中的按钮无法正常工作（但是，这可能是我的错，因为我不太熟悉 JQuery）。

$(document).ready(function () 
            $(".button").on("click", function () 
                if ($(this).attr('id') == "plus") 
                    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
                    $(this).html("-");
                    $(this).attr('id', 'minus');
                
                else 
                    $(this).html("+");
                    $(this).closest("tr").next().remove();
                    $(this).attr('id', 'plus');
                
            );
            $(".verify").on("click", function () 
                $(this).closest("tr").css("background-color", "#ffffff");
            );
        );

所以我的问题是 - 如何保持应用程序的当前外观和页面设计（在单元格外部打开子 GridView），同时仍然能够在后面的代码中访问 DropDownLists？可以用 JQuery 来做吗？如果没有，您对如何解决这个问题还有其他想法吗？

[编辑] 以下是一些外观图片：

【参考方案1】：

您也可以使用 hide() 代替 remove()。像这样：

 $(this).html("+");
 $(this).closest("tr").next().hide();
 $(this).attr('id', 'plus');

【讨论】：

在这种情况下，使用 hide() 方法将导致每次用户单击“+”按钮时都会添加新的表行。如果我解决了主要问题——每次都创建一个新对象，而不是使用现有的对象，同时仍然保持当前的设计——hide() 方法会更有用