pageindexchanging后，嵌套的gridview不会保持扩展

Question

我有一个嵌套的gridview，我希望它在用户单击其中一个分页值后保持展开状态。我在网上找到了一个例子，但它对我不起作用。

如果有人能看到我出错的地方，我将不胜感激。

这是我的JavaScript函数，它扩展/隐藏嵌套网格。它工作正常。这也是我设置隐藏值以识别哪个网格被扩展的地方。

function DivExpandCollapse(RecipientID) {
    var div = document.getElementById(RecipientID);
    var img = document.getElementById('img' + RecipientID);

    if (div.style.display == "none") {
        div.style.display = "inline";
        img.src = "Images/minus.png";
        $("#recdevgvIsExpanded").val("1");
    } else {
        div.style.display = "none";
        img.src = "Images/plus.png";
        $("#recdevgvIsExpanded").val("");
    }
}

此功能标识要展开的网格，并应将其展开。 它进入if语句并且recipientID是正确的。 我构建了div和img元素的ID来设置它们。

$(document).ready(function () {
    $("[id*=recdevgvIsExpanded]").each(function () {
        if ($(this).val() == "1") {
            var div = $(this).parent().closest("div");
            $tds = div.find("td");
            var recipientID = $tds.siblings(":first").text();
            var div2 = document.getElementById('div' + recipientID);
            var img = document.getElementById('imgdiv' + recipientID);

            div2.style.display = "inline";
            img.src = "Images/minus.png";
        }
    });
});

这是通过网格行设置Expanded值的代码。它还设置了正确的嵌套网格，以便扩展＆＃39;。

protected void Page_Load(object sender, EventArgs e)
{

    if (!IsPostBack)
    {
        //Get Recipient Info from Database
        populateRecipientInfoGrid();
    }//end if IsPostBack

    //For Re expanding the expanded rows
    foreach (GridViewRow row in RecipientInfoGridView.Rows)
    {
        if (row.RowType == DataControlRowType.DataRow)
        {
            HiddenField IsExpanded = row.FindControl("recdevgvIsExpanded") as HiddenField;
            IsExpanded.Value = Request.Form[IsExpanded.UniqueID];
        }
    }
}

这是PageIndexChanging事件。它正确地更新了数据。

protected void RecipientDeviceGridView_PageIndexChanging(object sender, GridViewPageEventArgs e)
{
    GridView tgvRecipientDevice = (GridView)sender;    
    tgvRecipientDevice.PageIndex = e.NewPageIndex;
    int tiRecipientID = Convert.ToInt32((tgvRecipientDevice.Parent.FindControl("rigvLblRecipientID") as Label).Text);
    populateDeviceGrid(tgvRecipientDevice, tiRecipientID);
}

这是标记

<asp:GridView ID="RecipientInfoGridView" runat="server" 
    AllowPaging="True" 
    PageSize="10" 
    AutoGenerateColumns="False" 
    Caption="Recipient Information" 
    CaptionAlign="Top"
    CssClass="grid" 
    HorizontalAlign="Left" 
    ShowFooter="True"
    ShowHeaderWhenEmpty="True" 
    DataKeyNames="RecipientID"
    OnPageIndexChanging="RecipientInfoGridView_PageIndexChanging">
    <Columns>
        <asp:TemplateField>
            <ItemTemplate>
                <a href="javascript:DivExpandCollapse('div<%# Eval("RecipientID")%>');">
                    <img id="imgdiv<%# Eval("RecipientID")%>" alt="" 
                        width="25px" border="0" src="Images/plus.png" />
                </a>
            </ItemTemplate>
        </asp:TemplateField>
        <asp:TemplateField HeaderText="RecipientID">
            <ItemTemplate>
                <asp:Label ID="rigvLblRecipientID" runat="server" 
                    Text='<%# Bind("RecipientID") %>' 
                    ClientIDMode="Static">

                </asp:Label>
            </ItemTemplate>
        </asp:TemplateField>
        <tr>
            <td colspan="100%">
                <div id="div<%# Eval("RecipientID") %>" style="display: none">
                    <asp:GridView ID="RecipientDeviceGridView" runat="server" 
                        AutoGenerateColumns="false" 
                        CssClass="grid" 
                        ShowFooter="true" 
                        Caption="Device Information" 
                        CaptionAlign="Top" 
                        AllowPaging="true" 
                        PageSize="1" 
                        HorizontalAlign="Left" 
                        OnPageIndexChanging="RecipientDeviceGridView_PageIndexChanging">
                        <Columns>
                            <asp:TemplateField HeaderText="DeviceID">
                                <ItemTemplate>
                                    <asp:Label ID="recdevgvLblDeviceID" runat="server" 
                                        Text='<%# Bind("DeviceID") %>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Device" ItemStyle-Wrap="false">
                                <ItemTemplate>
                                    <asp:Label ID="recdevgvLblDeviceName" runat="server" 
                                        Text='<%# Bind("DeviceName") %>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Service Provider">
                                <ItemTemplate>
                                    <asp:Label ID="recdevgvLblServiceName" runat="server" 
                                        Text='<%# Bind("ServiceName") %>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Address">
                                <ItemTemplate>
                                    <asp:Label ID="recdevgvLblAddress" runat="server" 
                                        Text='<%# Bind("Address") %>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Active">
                                <ItemTemplate>
                                    <asp:Label ID="recdevgvLblActive" runat="server" 
                                        Text='<%# (Boolean.Parse(Eval("Active").ToString())) ? "Yes" : "No" %>'>
                                    </asp:Label>
                                </ItemTemplate>
                            </asp:TemplateField>
                            <asp:TemplateField HeaderText="Action" 
                                ShowHeader="False" 
                                ItemStyle-Wrap="false" 
                                ItemStyle-HorizontalAlign="Center">
                                <ItemTemplate>
                                    <asp:Button ID="recdevgvEditButton" runat="server" 
                                        CausesValidation="True" 
                                        CommandName="Edit" 
                                        Text="Edit" 
                                        CssClass="gridActionbutton" 
                                        ValidationGroup="EditDeviceValidation">
                                    </asp:Button>
                                    &nbsp;
                                    <asp:Button ID="recdevgvDeleteButton" runat="server" 
                                        CausesValidation="False" 
                                        CommandName="Delete" 
                                        Text="Delete" 
                                        CssClass="gridActionbutton" 
                                        OnClientClick="return confirm('Are you sure you want to delete this Device Information?')">
                                    </asp:Button>
                                </ItemTemplate>
                            </asp:TemplateField>
                        </Columns>
                    </asp:GridView>
                </div>
                <asp:HiddenField ID="recdevgvIsExpanded" runat="server" />
            </ItemTemplate>
        </asp:TemplateField>
    </Columns>
</asp:GridView>

如果有人能就如何在PageIndexChanging事件之后完成嵌套网格以保持扩展的话给我任何指导，我将不胜感激。

感谢。

更新

我让嵌套网格保持打开状态，但无论我单击哪一行，它都是第一个在PageIndexChanging后打开的嵌套网格。问题是Hidden字段对每行都有相同的ID。使用＆＃39;提醒＆＃39;方法并在后面的代码中查看UniqueId。隐藏字段始终是第一行。 隐藏的领域应该在哪里？根据我在网上发现的一些代码，它是在＆＃39; div＆＃39;之后。并且在嵌套网格末尾的ItemTemplate之前。它应该是另一个地方吗？

更新 我没有正确识别隐藏的字段。我相信它位于正确的位置。 这是我的javascript函数：

function DivExpandCollapse(RecipientID) {
    var div = document.getElementById(RecipientID);
    var img = document.getElementById('img' + RecipientID);

    if (div.style.display == "none") {
        div.style.display = "inline";
        img.src = "Images/minus.png";
        $("#recdevgvIsExpanded").val("1");
        var hiddenName = $("#recdevgvIsExpanded").attr("name");
        alert(hiddenName + " expanded");
    }
    else {
        div.style.display = "none";
        img.src = "Images/plus.png";
         $("#recdevgvIsExpanded").val("");
    }

我需要识别与＆＃39; div＆＃39;相关联的隐藏字段。并且＆＃39; img＆＃39;。我该怎么做？

Answer 1

您的网格不在UpdatePanel中，因此每次更改索引时都会生成一个完整的帖子，这意味着重新创建整个页面，您需要将网格放在更新面板中，同时添加一个ScriptManager，之后您需要编写一个JS函数，在脚本管理器请求完成时扩展网格（听起来很多工作，但实际上并非如此）

//example
Sys.WebForms.PageRequestManager.getInstance().add_endRequest(
 function()
 {
      //here you'll expand the grid
 });

有关更新面板控件的一些文档：

https://msdn.microsoft.com/en-us/library/bb399001(v=vs.140).aspx

https://msdn.microsoft.com/en-us/library/bb386452(v=vs.140).aspx

Answer 2

更新面板对我不起作用。我使用了带有文字的PlaceHolder，它帮助了我但引起了css问题。

但是以下代码解决了我的问题。

希望这可以帮助任何面临更新面板无效的问题的人。

    $(function () {
        $("[src*=minus]").each(function () {
            $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>");
            $(this).next().remove()
        });
    });

Aspx代码：

<asp:GridView ID="gv_Parent" AutoGenerateColumns="False" 
DataKeyNames="Id" Font-Size="12px" Width="100%" runat="server"  
AllowPaging="true" PageSize="10" OnPageIndexChanging="OnPageIndexChanging">

<Columns>

<asp:ImageButton ID="imgShow" runat="server" OnClick="Show_Hide_ChildGrid" 
ImageUrl="../../../assets/img/plus.png" CommandArgument="Show" />

<asp:Panel ID="pnlOrders" runat="server" Visible="false" Style="position: 
relative">

<div id="divgvTargetInfo" runat="server"  class="table-responsive">

<asp:GridView ID="gvChild" AutoGenerateColumns="False" 
DataKeyNames="Id"  runat="server" 
OnPageIndexChanging="OnTargetPageIndexChanging" AllowPaging="true" 
pagesize="10">

<Columns>


</columns>
</asp:GridView>  --closing Child Grid
</asp:Panel>
</columns>
</asp:GridView>  --closing Parent Grid

代码背后：

 protected void Show_Hide_ChildGrid(object sender, EventArgs e)
  {
  ImageButton imgShowHide = (sender as ImageButton);
  GridViewRow row = (imgShowHide.NamingContainer as GridViewRow);
  if (imgShowHide.CommandArgument == "Show")
    {

      row.FindControl("pnlOrders").Visible = true;
       mgShowHide.CommandArgument = "Hide";
imgShowHide.ImageUrl = "../../../assets/img/minus.png";
GridView gvwChild = row.FindControl("gvChild") as GridView;

BindChildGrid(Convert.ToInt32(gv_Parent.DataKeys[row.RowIndex].Value), 
gvwChild);

 }
else
 {
 row.FindControl("pnlOrders").Visible = true;
 imgShowHide.CommandArgument = "Hide";
 imgShowHide.ImageUrl = "../../../assets/img/minus.png";

GridView gvwChild = row.FindControl("gvChild") as GridView;

BindchildGrid(Convert.ToInt32(gv_Parent.DataKeys[row.RowIndex].Value), 
gvwChild);
 }
 }
else
{
row.FindControl("pnlOrders").Visible = false;
mgShowHide.CommandArgument = "Show";
mgShowHide.ImageUrl = "../../../assets/img/plus.png";
}
}
protected void OnPageIndexChanging(object sender, GridViewPageEventArgs e)
{

    gv_Parent.PageIndex = e.NewPageIndex;
    this.BindGVTSPBA();
}

protected void OnTargetPageIndexChanging(object sender, 
GridViewPageEventArgs e)
{
GridViewRow gvRowParent = (((GridView)sender)).DataItemContainer as 
GridViewRow;

GridView gvwChild = ((GridView)sender);
gvwChild.PageIndex = e.NewPageIndex;
BindChildGrid
(Convert.ToInt32(gv_Parent.DataKeys[gvRowParent.RowIndex].Value), 
gvwChild);
}