将自己遇到的问题以实例形式写出来,以免以后再被同样的问题困扰
情况描述: 页面中有2个tab,第一个tab是gridview绑定数据,第2个tab是chart绑定
问题1. gridview表头固定问题 解决 设置属性
th { position:relative ;}
问题2. gridview纵向滚动条向下拉一点,切换到第2个tab,再切换回来的时候,gridview分页的表头不见了,解决办法如下:
(重点在于 height , position等属性的设置)
. aspx 页面
<head> <style type="text/css"> th { position:relative ; top:expression(this.offsetParent.scrollTop); } </style> </head> <body> <form id="form1" runat="server"> <div> <table cellpadding="0" cellspacing="0" class="windowStyle" align="center" width="100%"> <tr> <td class="topCenter" > <iewc:tabstrip id="TabStrip1" runat="server" style="font-size: 12px; height: 25px;margin-bottom:0px;border-bottom:0px solid #99bbe8;padding-bottom:0px; width: 240px; vertical-align: bottom; background-color: #224e71; background-image: url('../images/gv_head_bg2.gif'); background-repeat: repeat-x; background-position: bottom;" tabdefaultstyle="background-image:url('../images/gv_head_bg2.gif'); background-position: bottom;color:#436E9D;width:120px;text-align:center;color:#224e71" tabselectedstyle="background-image:url('../images/tab3_SELECT.gif'); background-repeat: no-repeat; background-position: bottom;width:120px;text-align:center;color:#224e71;padding-top:5px;" targetid="MultiPage1"> <iewc:Tab Text="查询列表" /> <iewc:Tab Text="图表" /> </iewc:tabstrip> <asp:Label ID="unitDisplay" runat="server" Visible="false"></asp:Label> </td> </tr> <tr> <td class="middleCenter"> <iewc:multipage id="MultiPage1" runat="server" style="height:590px;position:relative;border-top:0px solid #99bbe8;border-bottom-width:0px;margin-bottom:0px;padding-bottom:0px;"> <iewc:PageView ID="PageView1"> <div style="border:solid 0px #99bbe8;height:568px;padding:0px;margin:0px;"> <uc1:UC_HB_TJMiniteList ID="UC_HB_TJMiniteList1" runat="server" /> </div> </iewc:PageView> <iewc:PageView ID="PageView2"><div style="border:solid 1px #99bbe8;height:568px;padding:10px;overflow:auto;"> <uc2:UC_HB_JBMiniteChart ID="UC_HB_JBMiniteChart1" runat="server" /> </div> </iewc:PageView> </iewc:multipage> </td> </tr> </table> </div> </form> </body>
<table cellpadding="0" cellspacing="0" style="width: 100%;margin-top:0px;padding-top:0px;"> <tr> <td> <asp:GridView ID="gv_HB_TJMinite" runat="server" SkinID="GridViewSkinAuto" style="padding:0px;margin-top:0px;border-top:0px;border:0px;" onrowcreated="gv_HB_TJMinite_RowCreated" onrowdatabound="gv_HB_TJMinite_RowDataBound" > <EmptyDataTemplate> <table style=" width: 100%;height:100px;border:solid 0px;"> <tr> <td style="background-color:#f2f2f2;text-align:center;border:solid 0px;"> 暂时无数据! </td> </tr> </table> </EmptyDataTemplate> <EmptyDataRowStyle CssClass="EmptyRowCss" /> <FooterStyle BackColor="#507CD1" Font-Bold="True" ForeColor="White" /> <PagerStyle CssClass="GridViewPagerCss" BackColor="#2461BF" ForeColor="White" HorizontalAlign="Center" /> <SelectedRowStyle CssClass="SelectRowCss" BackColor="#D1DDF1" Font-Bold="True" ForeColor="#333333" /> <HeaderStyle BackColor="#acd7f5" Font-Bold="True" /> <EditRowStyle BackColor="#2461BF" CssClass="EditRowCss"/> <RowStyle CssClass="RowCss" BackColor="#EFF3FB" Height="25px" Wrap="False" /> <AlternatingRowStyle BackColor="White" /> </asp:GridView> </td> </tr> <tr> <td> <webdiyer:AspNetPager ID="AspNetPager1" runat="server" AlwaysShow="True" CssClass="pages" CurrentPageButtonClass="currentpage" CustomInfoHTML="共%RecordCount%条记录,当前为第%CurrentPageIndex%页,共%PageCount%页" CustomInfoSectionWidth="30%" CustomInfoTextAlign="Left" HorizontalAlign="Right" NextPageText="下一页<img src='../images/arrow4.gif' border='0'/>" NumericButtonCount="10" OnPageChanged="AspNetPager1_PageChanged" ShowBoxThreshold="10" ShowCustomInfoSection="Left" Visible="false" ShowFirstLast="False" ShowPageIndexBox="Never" Width="100%" PageSize="25"> </webdiyer:AspNetPager> </td> </tr> </table>
<asp:Chart ID="Chart1" runat="server" Palette="BrightPastel" ImageType="Png" Width="1400" BackColor="WhiteSmoke" BorderWidth="2" BackGradientStyle="TopBottom" BackSecondaryColor="White" BorderDashStyle="Solid" BorderColor="26, 59, 105" ImageLocation="~/TempImages/ChartPic_#SEQ(300,3)" Height="600px" > <titles> <asp:title ShadowColor="32, 0, 0, 0" Font="Trebuchet MS, 12pt, style=Bold" ShadowOffset="3" Text="多站点单参数图表展示" ForeColor="26, 59, 105" ></asp:title> </titles> <%--<borderskin skinstyle="Emboss"></borderskin>--%> <Series> </Series> <ChartAreas> <asp:chartarea Name="ChartArea1" BorderColor="64, 64, 64, 64" BorderDashStyle="Solid" BackSecondaryColor="White" BackColor="Gainsboro" ShadowColor="Transparent" BackGradientStyle="TopBottom"> <area3dstyle Rotation="10" perspective="10" Inclination="15" IsRightAngleAxes="False" wallwidth="0" IsClustered="False"></area3dstyle> <axisy linecolor="64, 64, 64, 64" IsLabelAutoFit="False"> <labelstyle font="Trebuchet MS, 8.25pt, style=Bold" /> <majorgrid linecolor="64, 64, 64, 64" /> </axisy> <axisx linecolor="64, 64, 64, 64" IsLabelAutoFit="true" > <labelstyle font="Trebuchet MS, 8.25pt, style=Bold" Angle="-25" /> <majorgrid linecolor="64, 64, 64, 64" /> </axisx> </asp:chartarea> </ChartAreas> </asp:Chart>