垂直滚动时冻结gridview寻呼机

时间:2013-05-20 18:01:48

标签: asp.net css gridview paging scrollable

我有一个gridview 我必须实现Paging以及使页面水平和垂直滚动。页面导航栏位于底部。

在垂直滚动页面时,我想要两件事 -

  1. 还应冻结gridview标头。
  2. gridview寻呼机也应该被冻结。
  3. 我的意思是他们不应该随着数据滚动 只有行才能滚动。

    我已经实施了 -
    1.使用CSS修复标题 2.使用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 />
    

1 个答案:

答案 0 :(得分:0)

我写了jQuery插件可以修复header和freeze列,它可以应用于GridView。 看图像:

enter image description here

它还支持寻呼机:

演示:Pager Support