单击行时，嵌套的 Gridview 应展开/折叠

Question

我有一个嵌套的 GridView 如下：

<asp:GridView ID="gvParent" runat="server" DataKeyNames="id">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <asp:GridView ID="gvChild" runat="server">
                    <Columns>
                        <asp:TemplateField>
                            <ItemTemplate>
                                <asp:Label ID="lblChild1" runat="server"/>
                            </ItemTemplate>
                        </asp:TemplateField>
                        //... some more child columns
                    </Columns>
                </asp:GridView>
            </ItemTemplate>
        </asp:TemplateField>

        <asp:TemplateField>
            <ItemTemplate>
                <asp:Label ID="lblParent1" runat="server"/>
            </ItemTemplate>
        </asp:TemplateField>
        //... some more parent columns
        <asp:TemplateField>
            <ItemTemplate>
                <asp:HiddenField ID="IsExpanded" ClientIDMode="Static" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

我想要做的是当用户单击父行上的任意位置时，子行展开，显示子 GridView 中与父行相关的所有行，然后当我再次单击时，它应该折叠。

我可以将数据很好地放入 GridViews 中，并且可以像 this tutorial 一样进行展开/折叠，但我不想只点击图片，我希望整行都可以点击。

为了至少尝试让它扩展，我使用了教程中的相同逻辑：

$(function () {
    $("[id*=gvParent] td").click(function () {
        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
    });
});

但它只是将该行中单击的列右侧的列的内容复制到下一行（参见snip）。我敢肯定这可能很简单，但我在任何地方都找不到答案！

更新：

我现在有：

$("[id*=gvFileUploadAdmin] td").click(function () {
    if ($("#IsExpanded").val() == "expanded") {
        debugger;
        collapseRow(this);
    }
    else if (typeof $("#IsExpanded").val() == 'undefined' 
            || $("#IsExpanded").val() == "collapsed") {
        expandRow(this);
    }
});

function expandRow(row) {
    $(row)
        .closest("tr")
        .after("<tr><td></td><td colspan = '999'>" +
            $("[id*=pnlFiles]", $(row).closest("tr")).html() +
            "</td></tr>");       
    $("#IsExpanded").val("expanded");
};

function collapseRow(row) {
    $(row).closest("tr").next().remove();
    $("#IsExpanded").val("collapsed");
}

这允许我打开和关闭单个行但是当打开一行然后打开另一行时，旁边的行被删除。唯一 ID 肯定有问题，但我不知道如何修复它。我在后台确实有一些 C# 这样做：

HiddenField IsExpanded = row.FindControl("IsExpanded") as HiddenField;
var uniqueId = IsExpanded.UniqueID;
IsExpanded.Value = Request.Form[uniqueId];

但是当它被删除时，它的工作方式没有任何区别，因为 Request.Form[uniqueId] 返回 null。

Answer 1

您是否尝试过使用 Listview 而不是 Gridview？我使用 LinkBut​​ton 来激活/停用行扩展。

1. 在 ItemTemplate 中，您将显示单元格包含在 LinkBut​​ton 定义中。

<ItemTemplate>
  <tr>
    <td>
      <asp:LinkButton ID="LinkButton1" runat="server" CommandName="Select">
       LOC:
        <asp:Label Text='<%# Eval("LocationCode") %>' runat="server" ID="LocationCodeLabel" /></span>
      </asp:LinkButton>
    </td>
    <td>
      <asp:Button ID="editLocation" runat="server" Text="EDIT" CommandName="Edit" CommandArgument='<%# Eval("LocationID") %>' />
      <asp:Button ID="deleteLocation" runat="server" Text="DELETE" CommandName="Delete" CommandArgument='<%# Eval("LocationID") %>' />
    </td>
  </tr>
</ItemTemplate>

1. 给 ItemTemplate 的 LinkBut​​ton CommandName="Select" - 这具有激活 SelectedItemTemplate 的效果。

2. 在 SelectedItemTemplate 中，用另一个 LinkBut​​ton 包围数据单元格。 LinkBut​​ton CommandName="UnSelect"。

ListView 免费处理 Select 命令。 UnSelect 必须由 Listview1_ItemCommand() 事件处理程序处理。

protected void LocationView_ItemCommand(object sender, ListViewCommandEventArgs e)
{
    if (e.CommandName == "UnSelect")
    {
        ListView1.SelectedIndex = -1;
        ListView1.DataBind();
    }
}

您可以将 GridView 插入 SelectedItemTemplate 中的 Div。然而，另一个嵌入在 SelectedItemTemplate 中的 ListView 将是理想的。

Answer 2

所以我终于设法让它工作了！这是我所做的（请注意，如果用户按下该行中的按钮，这不会扩展该行）：

$(function () {
    $("[id*=gvParent] td").click(function () {
        if ($(this).parents('tr').find('input[type="hidden"]').val() == "expanded")
            collapseRow(this);
        else
            expandRow(this);
     });

     // Ensure the row doesn't expand/collapse if a button is clicked
     $("[id*=gvParent] td .btn").click(function (e) {
         e.stopPropagation();
     });
     //Ensures any clicks on the child row aren't registered
     $("[id*=gvParent] td .gvChild").click(function (e) {
         e.stopPropagation();
     });
});

function expandRow(row) {
    $(row).closest("tr").after("<tr><td></td><td colspan = '999'>" +
                $("[id*=pnlFiles]", $(row).closest("tr")).html() +
                "</td></tr>");
    $(row).parents('tr').find('input[type="hidden"]').val("expanded");
};

function collapseRow(row) {
    $(row).closest("tr").next().hide();
    $(row).parents('tr').find('input[type="hidden"]').val("collapsed");
}

我还把ClientIDMode从静态改了：

<asp:HiddenField ID="IsExpanded" ClientIDMode="Static" runat="server" />

自动识别：

<asp:HiddenField ID="IsExpanded" ClientIDMode="AutoID" runat="server" />