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一样使扩展/折叠工作，但我不想让图像可点击，我希望整行可以点击。< / p>

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

$(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？我使用LinkButton来激活/停用行扩展。

在ItemTemplate中，将显示单元格包含在LinkButton定义中。

<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>

给ItemTemplate的LinkButton CommandName =“Select” - 这具有激活SelectedItemTemplate的效果。
在SelectedItemTemplate中，用另一个LinkButton包围数据单元格。 LinkButton 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" />

自动ID：

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

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

2 个答案: