垂直滚动时无法冻结gridview寻呼机。请帮忙 [英] Not able to freeze gridview pager while scrolling vertically. Help please

问题描述

我有一个gridview。我必须实现Paging以及使页面水平和垂直滚动。页面导航栏位于底部。在垂直滚动页面时，我想要两件事 -



gridview标题也应该冻结。

gridview寻呼机也应该冻结。



我的意思是他们不应该滚动数据。只有行才能滚动。



我已实现 -

1.使用CSS修复标题

2。使用CSS可水平滚动

3.使用CSS可垂直滚动



我无法支付
1.修复寻呼机。



请帮帮我。



我的代码：

 <   asp：Content  < span class =code-attribute>   ID   =  HeaderContent    runat   =   server    ContentPlaceHolderID   =  HeadContent >  
 <   style    < span class =code-attribute> type   =  text / css >  
  div ＃ gvResultStyle  
 {
  width  ：  500px;  
  height  ：  350px;  
 溢出 ：  scroll;  
  position  ：  relative;  
} 
 
  div ＃ gvResultStyle   th  
 {
  background-color  ： 海军;  
 颜色 ： 白色;  
  top  ：  expression（document.getElementById（gvResultStyle）。scrollTop-2） ;  
  left  ： 表达式（parentNode.scrollLeft）;  
  position  ：  relative;  
  z-index  ：  20;  
} 
 
。 gvPager  
 {
  left  ：  0px;  
  width  ：  400px;  
  border-右键 ：  solid;  
 位置 ： 绝对值;  
  height  ：  10px;  
  text-align  ：  left;  
  border-right-color  ： 海军;  
} 
 < /  风格 >  
 
 <   asp：Content     ID   =  BodyContent    runat   =  server    ContentPlaceHolderID   = 主要内容 >  
 <   h2  >  
欢迎使用ASP.NET！ 
 <   / h2  >  
 <   p  >  
要了解有关ASP.NET的更多信息，请访问<   a     href   =  http://www.asp.net    title   =  ASP.NET网站 >  
 www .asp.net <   / a  > 。 
 <   / p  >  
 <   p  >  
您还可以找到<   a     href   =  http：/ /go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409\" 
   
                   title   = 关于ASP的MSDN ASP.NET文档 > 文档。 MSDN上的NET <   / a  > 。 
 <   / p  >  
 <   div     id   =  gvResultStyle >  
 <   asp：GridView     ID   =  gvCustomers    runat   =  server    AutoGenerateColumns   =  False    DataKeyNames   =  ProductID   
   
           DataSourceID   =  SqlDataSource1    AllowPaging   =  true     PageSize   =  20    CssClass   =  gvResultStyle >  
 <   PagerSettings  < span class =code-attribute>  位置  =  Bottom    /  > ;  
 <   PagerStyle     CssClass   =  gvPager    /  >  
 <  列 >  
 <   asp：BoundField     DataField   =  ProductID    HeaderText   =  ProductID    InsertVisible   = 错误  
   
      < span class =code-attribute>                     ReadOnly   =  True     SortExpression   = < span class =code-keyword> ProductID    /  >  
 <   asp：BoundField     DataField   =  ProductName    HeaderText   =  ProductName    SortExpression   =  ProductName    /  >  
 <   asp：BoundField     DataField   =  SupplierID < span class =code-attribute>   HeaderText   =  SupplierID    SortExpression   =   SupplierID    /  >  
 <   asp：BoundField     DataField   =  CategoryID    HeaderText   =  CategoryID    SortExpression   =  CategoryID    /  >  
 <   asp：BoundField     DataField   =  QuantityPerUnit    HeaderText   =  QuantityPerUnit    SortExpression   =  QuantityPerUnit    /  >  
 <   asp：BoundField     DataField   =  UnitPrice    HeaderText   =  UnitPrice    SortExpression   =  UnitPrice    /  >  
 < span class =code-keyword><   asp：BoundField     DataField   =  UnitsInStock    HeaderText   =  UnitsInStock     SortExpression   = < span class =code-keyword> UnitsInStock    /  >  
 <   asp：BoundField     DataField   =  UnitsOnOrder    HeaderText   =  UnitsOnOrder    SortExpression   =  UnitsOnOrder    /  >  
 <   asp：BoundField     DataField   =  ReorderLevel    HeaderText   =  ReorderLevel    SortExpression   =  ReorderLevel    /  >  
 <   asp：CheckBoxField     DataField   = 已停止使用    HeaderText   = 已停用    SortExpression   = 已停止    /  >  
 <   asp ：BoundField    < span class =code-attribute> DataField   =  CategoryName    HeaderText   =  CategoryName    SortExpression   =  CategoryName    /  >  
 <   /列 < span class =code-keyword>>  
 <   / asp：GridView  >  
 <   / div  >  
 <   asp：SqlDataSource     ID   =  SqlDataSource1   < span class =code-attribute> runat   =  server    ConnectionString   =  <％ $ ConnectionStrings：NorthwindConnectionString％>  
   
           SelectCommand   =  SELECT * FROM [A. lphabetical产品列表] >  <   / asp：SqlDataSource  >  
 <   br     /   >  

解决方案

ConnectionStrings：NorthwindConnectionString％>

SelectCommand = SELECT * FROM [按字母顺序排列的产品列表] > < / asp：SqlDataSource >
< br / >

I have a gridview. I have to implement both Paging as well as make the page scrollable both horizontally and vertically. The page navigation bar comes at the bottom. While scrolling the page vertically, I want two things -

The gridview headers should also be freezed.
gridview pagers should also be freezed.

I mean they should not scroll along with the data. Only the rows should scroll.

I have implemented -
1. Fixed header using CSS
2. Horizontally scrollable using CSS
3. Vertically scrollable using CSS

I am not able to
1. Fix the Pager.

Please help me.

My code:

<asp:Content ID="HeaderContent" runat="server" ContentPlaceHolderID="HeadContent">
<style type="text/css">
    div#gvResultStyle
    {
        width: 500px;
        height: 350px;
        overflow: scroll;
        position: relative;
    }

    div#gvResultStyle th
    {
        background-color: Navy;
        color: White;
        top: expression(document.getElementById("gvResultStyle").scrollTop-2);
        left: expression(parentNode.scrollLeft);
        position: relative;
        z-index: 20;
    }

    .gvPager
    {
        left: 0px;
        width: 400px;
        border-right-style: solid;
        position: absolute;
        height: 10px;
        text-align: left;
        border-right-color: Navy;
    }
</style>

<asp:Content ID="BodyContent" runat="server" ContentPlaceHolderID="MainContent">
<h2>
    Welcome to ASP.NET!
</h2>
<p>
    To learn more about ASP.NET visit <a href="http://www.asp.net" title="ASP.NET Website">
        www.asp.net</a>.
</p>
<p>
    You can also find <a href="http://go.microsoft.com/fwlink/?LinkID=152368&clcid=0x409"

        title="MSDN ASP.NET Docs">documentation on ASP.NET at MSDN</a>.
</p>
<div id="gvResultStyle">
<asp:GridView ID="gvCustomers" runat="server" AutoGenerateColumns="False" DataKeyNames="ProductID"

    DataSourceID="SqlDataSource1" AllowPaging="true" PageSize="20" CssClass="gvResultStyle">
    <PagerSettings Position="Bottom" />
    <PagerStyle CssClass="gvPager" />
    <Columns>
        <asp:BoundField DataField="ProductID" HeaderText="ProductID" InsertVisible="False"

            ReadOnly="True" SortExpression="ProductID" />
        <asp:BoundField DataField="ProductName" HeaderText="ProductName" SortExpression="ProductName" />
        <asp:BoundField DataField="SupplierID" HeaderText="SupplierID" SortExpression="SupplierID" />
        <asp:BoundField DataField="CategoryID" HeaderText="CategoryID" SortExpression="CategoryID" />
        <asp:BoundField DataField="QuantityPerUnit" HeaderText="QuantityPerUnit" SortExpression="QuantityPerUnit" />
        <asp:BoundField DataField="UnitPrice" HeaderText="UnitPrice" SortExpression="UnitPrice" />
        <asp:BoundField DataField="UnitsInStock" HeaderText="UnitsInStock" SortExpression="UnitsInStock" />
        <asp:BoundField DataField="UnitsOnOrder" HeaderText="UnitsOnOrder" SortExpression="UnitsOnOrder" />
        <asp:BoundField DataField="ReorderLevel" HeaderText="ReorderLevel" SortExpression="ReorderLevel" />
        <asp:CheckBoxField DataField="Discontinued" HeaderText="Discontinued" SortExpression="Discontinued" />
        <asp:BoundField DataField="CategoryName" HeaderText="CategoryName" SortExpression="CategoryName" />
    </Columns>
</asp:GridView>
</div>
<asp:SqlDataSource ID="SqlDataSource1" runat="server" ConnectionString="<%$ ConnectionStrings:NorthwindConnectionString %>"

    SelectCommand="SELECT * FROM [Alphabetical list of products]"></asp:SqlDataSource>
<br />

解决方案

ConnectionStrings:NorthwindConnectionString %>" SelectCommand="SELECT * FROM [Alphabetical list of products]"></asp:SqlDataSource> <br />

这篇关于垂直滚动时无法冻结gridview寻呼机。请帮忙的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！