在PostBack上扩展了Child Gridview

时间:2017-06-19 15:11:42

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

在回发后保持Child 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>

VB

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

2 个答案:

答案 0 :(得分:1)

如果不详细分析您的问题,我可以建议以下内容:

在asp.net上回发document.ready不会触发,因为这不会被视为on load事件。使用内置的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将功能重新附加到受部分回发影响的页面的元素/控件。

答案 1 :(得分:0)

经过大量的反复试验后,我放弃了客户端操作,现在通过后面的代码展开了展开崩溃。通过此更改,我能够保存展开的每一行的uniqueID,并将该ID与附加的分隔字符一起存储在隐藏字段中。这是在按钮单击事件中完成的。然后我在子外部声明了一个List,并在每次加载页面时为该数组赋值。然后我遍历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