在 PostBack 上保持子 Gridview 展开答案

【问题标题】：Keep Child Gridview expanded on PostBack在 PostBack 上保持子 Gridview 展开
【发布时间】：2017-06-19 15:11:41
【问题描述】：

在回发后保持子 Gridview 扩展存在一些问题。我已经实现了其他问题的答案，但 Gridivew 仍然最小化回发。任何帮助或指导将不胜感激，谢谢。

JAVASCRIPT

<script type="text/javascript" src="http://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<script type="text/javascript">
  $("[src*=plus]").live("click", function () {
    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
    $(this).attr("src", "../img/minus.png");
    $(this).next().next().val(1);
  });

  $("[src*=minus]").live("click", function () {
    $(this).attr("src", "../img/plus.png");
    $(this).closest("tr").next().remove();
    $(this).next().next().val("");

  });

  $(function () {
    $("[id*=IsExpanded]").each(function () {
      if ($(this).val() == "1") {
        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $("[id*=childpanel]", $(this).closest("tr")).html() + "</td></tr>")
        $("[src*=plus]", $(this).closest("tr")).attr("src", "../img/minus.png");
      }
    });
  });
</script>

.NET

<asp:Panel ID="panel1" runat="server" Visible="false" Width="100%">
  <div class="griddiv" style="overflow-y: scroll; max-height: 500px; max-width: 80%;">

    <asp:GridView ID="GridView1" runat="server" Font-Size="Medium" CellPadding="5" GridLines="None" AutoGenerateColumns="False"
      RowStyle-CssClass="rows" HeaderStyle-CssClass="gridheader" DataKeyNames="batchID" OnRowDataBound="OnRowDataBound">

      <Columns>
        <asp:TemplateField>
          <ItemTemplate>
            <img alt="" style="cursor: pointer" src="../img/plus.png" />
            <asp:Panel ID="childpanel" runat="server" Style="display: none;">
              <div class="griddiv" style="overflow-y: scroll; max-height: 500px; max-width: 80%;">
                <asp:GridView ID="gvchild" runat="server" Font-Size="Medium" CellPadding="5" GridLines="None" AutoGenerateColumns="False"
                  CssClass="datagrid1" RowStyle-CssClass="rows" HeaderStyle-CssClass="gridheader" DataKeyNames="id">
                  <AlternatingRowStyle BackColor="#e8e8f9" />
                  <Columns>
                    <asp:TemplateField ItemStyle-Width="30px" HeaderText="">
                      <ItemTemplate>
                        <asp:Button ID="lnkEdit" runat="server" Text="Edit" OnClick="Edit" CssClass="button" />
                      </ItemTemplate>
                      <ItemTemplate>
                        <asp:Label runat="server" ID="rowidtest" Text='<%#Eval("id") %>' Visible="false"></asp:Label>
                      </ItemTemplate>
                    </asp:TemplateField>
                    <asp:BoundField ItemStyle-Width="150px" DataField="id" HeaderText="ID" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="optionnum" HeaderText="Option Number" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="optiondesc" HeaderText="Option Description" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="optioncat" HeaderText="Option Category" />
                    <asp:BoundField DataField="optionsub" HeaderText="Option Sub-Category" ItemStyle-Width="150px" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="houseplan" HeaderText="House Plan" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="craftcode" HeaderText="Craft Code" />
                    <asp:BoundField ItemStyle-Width="150px" DataField="parentoption" HeaderText="Parent Option" />
                    <asp:BoundField DataField="parentoption2" HeaderText="Parent Option 2" ItemStyle-Width="150px" />
                    <asp:BoundField DataField="parentoption3" HeaderText="Parent Option 3" ItemStyle-Width="150px" />
                    <asp:BoundField DataField="parentoption4" HeaderText="Parent Option 4" ItemStyle-Width="150px" />
                    <asp:BoundField DataField="parentoption5" HeaderText="Parent Option 5" ItemStyle-Width="150px" />
                    <asp:TemplateField>
                      <HeaderTemplate>
                        <asp:CheckBox runat="server" ID="chkHeader" TextAlign="Right" />
                      </HeaderTemplate>
                      <ItemTemplate>
                        <asp:CheckBox runat="server" ID="chkRow" />
                      </ItemTemplate>
                    </asp:TemplateField>
                  </Columns>
                </asp:GridView>
              </div>

            </asp:Panel>
            <asp:HiddenField ID="IsExpanded" runat="server" />
          </ItemTemplate>
        </asp:TemplateField>
        <asp:BoundField DataField="batchID" HeaderText="Batch ID" HtmlEncode="true" HeaderStyle-Width="25%" />
        <asp:BoundField DataField="requestdate" HeaderText="Request Date" HtmlEncode="true" HeaderStyle-Width="25%" />
        <asp:BoundField DataField="requestby" HeaderText="Requested By" HtmlEncode="true" HeaderStyle-Width="25%" />
        <asp:BoundField DataField="entityname" HeaderText="Division" HtmlEncode="true" HeaderStyle-Width="25%" />

      </Columns>

    </asp:GridView>
  </div>
  <h4></h4>
  <div>
    <asp:Button ID="Button" runat="server"
      Text="Approve" CssClass="button" />
  </div>
</asp:Panel>

Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
  For Each row As GridViewRow In GridView1.Rows
    If row.RowType = DataControlRowType.DataRow Then
      Dim IsExpanded As HiddenField = TryCast(row.FindControl("IsExpanded"), HiddenField)

      IsExpanded.Value = Request.Form(IsExpanded.UniqueID)
    End If
  Next
End Sub

【问题讨论】：

标签： javascript jquery asp.net vb.net gridview

【解决方案1】：

如果不详细分析您的问题，我可以提出以下建议：

在 asp.net 回发 document.ready 不会触发，因为这不被视为加载事件。使用内置 jquery pageLoad 事件重新绑定您的 javascript 可能有助于重新触发 javascript。

function pageLoad(sender, args) {
  $("[src*=plus]").live("click", function () {
    $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $(this).next().html() + "</td></tr>")
    $(this).attr("src", "../img/minus.png");
    $(this).next().next().val(1);    
  });

  $("[src*=minus]").live("click", function () {
    $(this).attr("src", "../img/plus.png");
    $(this).closest("tr").next().remove();
    $(this).next().next().val("");

  });

  $(function () {
    $("[id*=IsExpanded]").each(function () {
      if ($(this).val() == "1") {
        $(this).closest("tr").after("<tr><td></td><td colspan = '999'>" + $("[id*=childpanel]", $(this).closest("tr")).html() + "</td></tr>")
        $("[src*=plus]", $(this).closest("tr")).attr("src", "../img/minus.png");
      }
    });
  });
}

此代码需要在您的 document.ready 事件之外触发，因此要么创建一个可以在文档就绪和 pageLoad 上触发的函数，要么简单地复制代码。

更新面板（更新面板内的内容）

如果您的代码在回发的更新面板中，那么您应该使用此函数来使 javascript 在回发时触发。

var prm = Sys.WebForms.PageRequestManager.getInstance();
prm.add_endRequest(function () {

}

比较

document.ready （在 DOM 准备好后立即调用）

$(function() { 

});

最好一次性初始化。
在 DOM 准备好后立即调用；可能比 pageLoad() 稍早调用。
无法将功能重新附加到受部分回发影响的页面元素/控件。

pageLoad （页面完全加载时调用）

function pageLoad() {

}

如果与 UpdatePanel 一起使用，则不适合一次性初始化。
最好使用 UpdatePanel 将功能重新附加到受部分回发影响的页面元素/控件。

【讨论】：

更新面板可能很难使用 javascript，但如果您将代码插入到我上面提到的函数 prm.add_endRequest 中，那么当从更新面板内的回发刷新代码时，代码应该会重新触发。
@ITLance 您将需要代码运行两次。一次是你最初拥有的，一次是为了回发。这意味着有两个相同的 javascript。

【解决方案2】：

经过大量试验和错误后，我放弃了客户端操作，现在通过后面的代码展开折叠。通过此更改，我能够保存展开的每一行的唯一 ID，并将该 ID 与附加的分隔符一起存储在隐藏字段中。这是在按钮单击事件中完成的。然后我在子外部声明了一个列表，并在每次页面加载时将值分配给数组。然后，我遍历 OnRowDataBound 事件中的列表项，并将具有与列表项匹配的 ID 的面板设置为可见。奇迹般有效。

<asp:HiddenField ID="expandedRow" runat="server" Visible="false" Value=""/>
                            <asp:panel ID="panel2" runat="server" Visible="false" Width="1340px" >


                            <div class="griddiv" id="testExpand" style="overflow-y:scroll;max-height:500px; max-width:80%;">
                                  <asp:GridView ID="gvparent" runat="server" Font-Size="Medium" CellPadding="5" GridLines="None" AutoGenerateColumns="False" 
                            CssClass="datagrid1" RowStyle-CssClass="rows" HeaderStyle-CssClass="gridheader"  DataKeyNames="batchID" OnRowDataBound="OnRowDataBound">
                            <AlternatingRowStyle BackColor="#e8e8f9" />
                                <Columns>
                                 <asp:TemplateField>
                                    <ItemTemplate>
                                        <asp:imagebutton ID="imgShow" runat="server" ImageUrl="../img/plus.png"  OnClick = "show_hide_childgrid" commandArgument = "Show" />

                                         </ItemTemplate>
                                      </asp:TemplateField>
                                      <asp:TemplateField HeaderText="Batch ID" HeaderStyle-Width="25%">  
                                        <ItemTemplate>  
                                            <asp:Label ID="batchid" runat="server" Text='<%#Eval("batchid")%>'></asp:Label>  
                                        </ItemTemplate>  
                                    </asp:TemplateField>
                                      <asp:TemplateField HeaderText="Request Date" HeaderStyle-Width="25%">  
                                        <ItemTemplate>  
                                            <asp:Label ID="rqstdate5" runat="server" Text='<%#FormatDate(Eval("requestdate"))%>'></asp:Label>  
                                        </ItemTemplate>  
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Requested By" HeaderStyle-Width="25%">  
                                        <ItemTemplate>  
                                            <asp:Label ID="rqstby5" runat="server" Text='<%#Eval("requestby")%>'></asp:Label>  
                                        </ItemTemplate>  
                                    </asp:TemplateField>
                                    <asp:TemplateField HeaderText="Division" HeaderStyle-Width="25%">  
                                        <ItemTemplate>  
                                            <asp:Label ID="division" runat="server" Text='<%#Eval("EntityName")%>'></asp:Label>  
                                        </ItemTemplate>  
                                    </asp:TemplateField>
                                         <asp:TemplateField>
                                         <ItemTemplate>

                                        <asp:Panel ID="childpanel" runat="server" Visible="false">
                                        <tr id="childRow"  runat="server">
                                        <td></td>
                                        <td colspan="999" style="padding-left:15px;padding-right:5px;" id="childCell" runat="server">
                                        <div class="griddiv" style="overflow-y:scroll;max-height:500px; max-width:80%;">
                                            <asp:GridView ID="gvchild" runat="server" Font-Size="Medium" CellPadding="5" GridLines="None" AutoGenerateColumns="False" 
                                                            CssClass="datagrid1" RowStyle-CssClass="rows" HeaderStyle-CssClass="gridheader" DataKeyNames="id">
                                                            <AlternatingRowStyle BackColor="#e8e8f9" />
                                                <Columns>
                                                     <asp:TemplateField HeaderText="ID" Visible="false">  
                                                        <ItemTemplate>  
                                                            <asp:Label ID="rowidtest" runat="server" Text='<%#Eval("id") %>' Visible="false"></asp:Label>  
                                                        </ItemTemplate>  
                                                    </asp:TemplateField> 
                                                    <asp:BoundField ItemStyle-Width="150px" DataField="optionnum" HeaderText="Option Number" />
                                                    <asp:BoundField ItemStyle-Width="150px" DataField="optiondesc" HeaderText="Option Description" />
                                                    <asp:BoundField ItemStyle-Width="150px" DataField="optioncat" HeaderText="Option Category" />
                                                    <asp:BoundField DataField="optionsub" HeaderText="Option Sub-Category"  ItemStyle-Width="150px" />                       
                                                    <asp:BoundField ItemStyle-Width="150px" DataField="houseplan" HeaderText="House Plan" />
                                                    <asp:BoundField ItemStyle-Width="150px" DataField="craftcode" HeaderText="Craft Code" />
                                                    <asp:BoundField ItemStyle-Width="150px" DataField="parentoption" HeaderText="Parent Option" />
                                                    <asp:BoundField DataField="parentoption2" HeaderText="Parent Option 2" ItemStyle-Width="150px" />
                                                    <asp:BoundField DataField="parentoption3" HeaderText="Parent Option 3" ItemStyle-Width="150px" />
                                                    <asp:BoundField DataField="parentoption4" HeaderText="Parent Option 4" ItemStyle-Width="150px" />                         
                                                    <asp:BoundField DataField="parentoption5" HeaderText="Parent Option 5" ItemStyle-Width="150px" />                                   
                                                    <asp:TemplateField>
                                                        <HeaderTemplate>
                                                            <asp:CheckBox runat="server" ID="chkHeader" />
                                                        </HeaderTemplate>
                                                        <ItemTemplate>
                                                            <asp:CheckBox runat="server" ID="chkRow"/>
                                                        </ItemTemplate>
                                                     </asp:TemplateField>
                                                </Columns>
                                            </asp:GridView>
                                           </div>
                                           </td>
                                        </tr>
                                        <tr>
                                            <td></td>
                                        </tr>
                                        </asp:Panel>

                                    </ItemTemplate>
                                </asp:TemplateField>

                                </Columns>
                            </asp:GridView>
                            </div>



Dim newList As New List(Of String)

    Protected Sub Page_Load(ByVal sender As Object, ByVal e As System.EventArgs) Handles Me.Load
        newList = expandedRow.Value.Split("|").ToList()


        If Not Page.IsPostBack Then
            RequestStatus()
            panel5.Visible = True
            A4.Attributes("class") = "topnavactive"

            ViewState("SortExpr") = " projcode ASC"
            ViewState("expand") = 0

        End If



    End Sub



 Protected Sub OnRowDataBound(ByVal sender As Object, ByVal e As GridViewRowEventArgs)
        If e.Row.RowType = DataControlRowType.DataRow Then
            Dim batchid As String = gvparent.DataKeys(e.Row.RowIndex).Value.ToString()
            Dim gvchild As GridView = TryCast(e.Row.FindControl("gvchild"), GridView)
            Dim childpanel As Panel = TryCast(e.Row.FindControl("childpanel"), Panel)
            Dim imgShow As ImageButton = TryCast(e.Row.FindControl("imgShow"), ImageButton)

          For Each item In newList
            If gvchild.UniqueID = item Then

                childpanel.Visible = True
                imgShow.CommandArgument = "Hide"
                imgShow.ImageUrl = "../img/minus.png"

            Else

            End If
        Next
            Dim con2 As New SqlConnection(Session("strconnection"))
            Dim cmd2 As New SqlCommand()
            cmd2.CommandType = CommandType.Text
            cmd2.CommandText = String.Format("select * from PurchasingRequest where batchID='{0}' and batchID is not null and approved = 1 and complete = 0", batchid)
            cmd2.Connection = con2

            con2.Open()
            Dim dt2 As New DataTable()
            Dim da2 As New SqlDataAdapter(cmd2)
            da2.Fill(dt2)
            con2.Close()
            con2.Dispose()
            gvchild.DataSource = dt2
            gvchild.DataBind()
        End If






    End Sub




Protected Sub Show_Hide_ChildGrid(ByVal sender As Object, ByVal e As EventArgs)
        Dim imgShowHide As ImageButton = TryCast(sender, ImageButton)
        Dim row As GridViewRow = TryCast(imgShowHide.NamingContainer, GridViewRow)
        Dim gvchild As GridView = TryCast(row.FindControl("gvchild"), GridView)

        If imgShowHide.CommandArgument = "Show" Then
            row.FindControl("childpanel").Visible = True
            imgShowHide.CommandArgument = "Hide"
            imgShowHide.ImageUrl = "../img/minus.png"
            expandedRow.Value = gvchild.UniqueID.Substring(0, 22)


        Else
            row.FindControl("childpanel").Visible = False
            imgShowHide.CommandArgument = "Show"
            imgShowHide.ImageUrl = "../img/plus.png"
            expandedRow.Value = ""

        End If


    End Sub

【讨论】：