通过Javascript获取父GridView中的Div Id

Get the Div Id inside the parent GridView by Javascript

本文关键字:中的 Div Id GridView Javascript 获取 通过      更新时间:2023-09-26

我想获得id为forExport和隐藏字段值的div

<table width="100%">
<tr>
    <td>
    <asp:HiddenField ID="hidGridView" runat="server"/>
    <asp:GridView ID="grvPayroll" CssClass="table table-striped table-bordered table-hover"
                  AllowPaging="true"
                  runat="server" AutoGenerateColumns="False" DataKeyNames="Id"
                  OnRowCancelingEdit="grvPayroll_RowCancelingEdit" OnRowDataBound="grvPayroll_RowDataBound"
                  OnRowEditing="grvPayroll_RowEditing" OnRowUpdating="grvPayroll_RowUpdating"
                  OnRowCommand="grvPayroll_RowCommand" ShowFooter="True" OnRowDeleting="grvPayroll_RowDeleting"
                  OnRowDeleted="grvPayroll_RowDeleted" OnRowUpdated="grvPayroll_RowUpdated"
                  OnPageIndexChanging="grvPayroll_OnPageIndexChanging" PageSize="5" OnRowCreated="grvPayroll_RowCreated">
    <Columns >
<asp:TemplateField>
    <ItemTemplate>
        <a href="javascript:expandcollapse('div<%# Eval("Id") %>', 'one');">
            <img id='imgdiv<%# Eval("Id") %>' alt="Click to show/hide Payroll Details <%# Eval("PayrollCode") %>" border="0" src="../App_Themes/Admin/img/plus.png"/>
        </a>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="PayrollCode" SortExpression="PayrollCode">
    <EditItemTemplate>
        <asp:TextBox ID="txtPayrollCode" runat="server" Text='<%# Eval("PayrollCode") %>' CssClass="textbox"></asp:TextBox>
        <asp:RequiredFieldValidator ID="rfvtxtPayrollCode"
                                    runat="server" ControlToValidate="txtPayrollCode"
                                    ErrorMessage="Required">
            *
        </asp:RequiredFieldValidator>
    </EditItemTemplate>
    <FooterTemplate>
        <asp:TextBox ID="txtNewPayrollCode" runat="server" CssClass="textbox"></asp:TextBox>
    </FooterTemplate>
    <ItemTemplate>
        <asp:Label ID="lblPayrollCode" runat="server" Text='<%# Bind("PayrollCode") %>'></asp:Label>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField HeaderText="Function" ShowHeader="False">
    <EditItemTemplate>
        <asp:LinkButton ID="lbtUpdate" runat="server" CausesValidation="False" CommandName="Update" Text="Update"></asp:LinkButton>
        <asp:LinkButton ID="lbtCancel" runat="server" CausesValidation="False" CommandName="Cancel" Text="Cancel"></asp:LinkButton>
    </EditItemTemplate>
    <FooterTemplate>
        <asp:ImageButton ID="lbtAddNew" runat="server" ToolTip="Add New" ImageUrl="../App_Themes/Admin/img/file_add.png" CausesValidation="False" CommandName="AddNew"/>
    </FooterTemplate>
    <ItemTemplate>
        <asp:ImageButton ID="lbtEdit" runat="server" ToolTip="Edit" ImageUrl="../App_Themes/Admin/img/edit.png" CausesValidation="False" CommandName="Edit"/>
        <asp:ImageButton ID="lbtDelete" runat="server" ToolTip="Delete" ImageUrl="../App_Themes/Admin/img/delete.png" OnClientClick=" return confirm('Are you sure you want to delete this?'); " CausesValidation="False" CommandName="Delete"/>
    </ItemTemplate>
</asp:TemplateField>
<asp:TemplateField>
    <ItemTemplate>
        <tr>
            <td colspan="100%">
                <div id='div<%# Eval("Id") %>' style="display: none; left: 15px; OVERFLOW: auto; position: relative; WIDTH: 98%">                
                    <div id="forExport">                
                        <asp:GridView ID="grvPayrollDetails" 
                                      EmptyDataText="No Records Found" CellPadding="5" ForeColor="#333333" GridLines="Both" AllowPaging="False"
                                      runat="server" AutoGenerateColumns="False" DataKeyNames="PayrollID" 
                                      OnRowDataBound="grvPayrollDetails_RowDataBound" OnRowCreated="grvPayrollDetails_RowCreated">
                            <AlternatingRowStyle CssClass="GridStyle_AltRowStyle2"/>
                            <HeaderStyle CssClass="GridStyle_HeaderStyle2"/>
                            <RowStyle CssClass="GridStyle_RowStyle2"/>                        
                            <Columns >                               
                                <asp:TemplateField HeaderText="Mã NV">
                                    <ItemTemplate>
                                        <asp:Label ID="plEmpID" runat="server" Visible="false" Text='<%# Eval("EmpID").ToString() %>'></asp:Label>
                                        <%#get_EmpCode(Eval("EmpID").ToString()) %><br/>
                                    </ItemTemplate>
                                </asp:TemplateField>
                                 <asp:TemplateField HeaderText="Tổng chi phí">
                                    <ItemTemplate>
                                        <asp:Label ID="lblTotalPaymentCost" runat="server" Text='<%#Format_Money(Eval("TotalPaymentCost").ToString()) %>'></asp:Label>
                                    </ItemTemplate>
                                </asp:TemplateField>
                            </Columns>
                        </asp:GridView>                          
                    </div>
                </div>
            </td>
        </tr>
    </ItemTemplate>
</asp:TemplateField>
</Columns>
</asp:GridView>
</td>
</tr>
</table>

这是脚本:

<script type="text/javascript">
    function expandcollapse(obj, row) {
        var div = document.getElementById(obj);
        var img = document.getElementById("img" + obj);
        if (div.style.display == "none") {
            div.style.display = "block";
            if (row == "alt") {
                img.src = "../App_Themes/Admin/img/minus.png";
            } else {
                img.src = "../App_Themes/Admin/img/minus.png";
            }
            img.alt = "Close to view other Payroll info";
        } else {
            div.style.display = "none";
            if (row == "alt") {
                img.src = "../App_Themes/Admin/img/plus.png";
            } else {
                img.src = "../App_Themes/Admin/img/plus.png";
            }
            img.alt = "Expand to show Payroll Details";
        }
    }
</script>
    <script type="text/javascript">
        function AssignExportHTML() {
            document.getElementById('<%=hidGridView.ClientID%>').value = htmlEscape(forExport.innerHTML);
        }
        function htmlEscape(str) {
            return String(str)
            .replace(/&/g, '&amp;')
            .replace(/"/g, '&quot;')
            .replace(/'/g, '&#39;')
            .replace(/</g, '&lt;')
            .replace(/>/g, '&gt;');
        }
    </script>

我需要将嵌套的子网格视图导出为分组(小计、总计)excel,但当我导出分组行时,它只是一个空行,所以我尝试了此代码,但它无法与嵌套网格视图一起使用那么怎么做呢,因为在调试的时候,会出现空值错误。我想是因为Hidden Field的值为null,我无法在Parent Gridview中获得div forExport

 public override void VerifyRenderingInServerForm(Control control)
        {
            /* Confirms that an HtmlForm control is rendered for the specified ASP.NET
               server control at run time. */
        }
        protected void ExportExcel(object sender, EventArgs e)
        {
            grvPayroll.AllowPaging = false;
            var grvPayrollDetails = new GridView();
            for (var i = 0; i < grvPayroll.Rows.Count; i++)
            {
                grvPayrollDetails = (GridView) grvPayroll.Rows[i].FindControl("grvPayrollDetails");
            }
            Response.Clear();
            Response.Buffer = true;
            Response.AddHeader("content-disposition", "attachment;filename=PayrollExport.xls");
            Response.Charset = "UTF-8";
            Response.ContentType = "application/vnd.ms-excel";
            using (var sw = new StringWriter())
            {
                grvPayrollDetails.AllowPaging = false;
                BindGrid(SortField);
                grvPayrollDetails.Font.Name = "Times New Roman";
                grvPayrollDetails.BackColor = Color.Transparent;
                grvPayrollDetails.GridLines = GridLines.Both;
                grvPayrollDetails.HeaderStyle.VerticalAlign=VerticalAlign.Middle;
                sw.Write(System.Web.HttpUtility.HtmlDecode(hidGridView.Value));
                Response.Write(Regex.Replace(sw.ToString(), "(<a[^>]*>)|(</a>)", " ", RegexOptions.IgnoreCase));
                Response.Flush();
                Response.End();
            }
        }

我引用了这个链接:当后面的代码更改网格时,从GridView导出到Excel

要访问asp.net控件的id,必须使用ClientID,如下

document.getElementById('<%=hidGridView.ClientID%>').value =  htmlEscape(document.getElementById("forExport").innerHTML);