gridview固定表头实例----横向滚动纵向滚动

最新推荐文章于 2021-08-11 11:23:11 发布

Hannah

最新推荐文章于 2021-08-11 11:23:11 发布

阅读量1.9k

点赞数

分类专栏： C# 页面样式文章标签： GridView gridview固定表头横向滚动

本文链接：https://blog.csdn.net/nan2008zzu/article/details/9794045

版权

C# 页面样式专栏收录该内容

3 篇文章 0 订阅

订阅专栏

将自己遇到的问题以实例形式写出来，以免以后再被同样的问题困扰

情况描述：页面中有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>

第1个控件<UC_HB_TJMiniteList>

<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>

第二个控件<UC_HB_JBMiniteChart>

 <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>

Hannah

关注

0
点赞
踩
1

收藏

觉得还不错? 一键收藏
0
评论
gridview固定表头实例----横向滚动纵向滚动

将自己遇到的问题以实例形式写出来，以免以后再被同样的问题困扰情况描述：页面中有2个tab，第一个tab是gridview绑定数据，第2个tab是chart绑定问题1. gridview表头固定问题解决设置属性th { position:relative ;}问题2. gridview纵向滚动条向下拉一点，切换到第2个tab,再切换回来的时候，gridview分页的表
复制链接

扫一扫