2013-05-20 116 views
0

我有一个gridview。
我必须同时实现页面以及页面的水平和垂直滚动。页面导航栏位于底部。垂直滚动时冻结gridview pager

虽然垂直滚动页面,我想两件事情 -

  1. GridView的标题也应该被冻结。
  2. gridview寻呼机也应该被冻结。

我的意思是他们不应该随数据一起滚动。
只有行应滚动。

我已经实现 - 用CSS
2.
1.固定头水平滚动使用CSS
3.垂直滚动使用CSS

我不能
1.修正寻呼机。

我的代码:

<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&amp;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 /> 

回答

0

我写的jQuery插件可以固定头和冻结列,它可以应用到GridView控件。 看到图像:

enter image description here

它还支持呼叫器:

演示:Pager Support

+0

看了一下您的网站。但是这个文件'gridviewScroll.min.js'在哪里? – aspiring