0

私はグリッドビューを持っています。
ページングの両方を実装するだけでなく、ページを水平方向と垂直方向の両方にスクロールできるようにする必要があります。ページ ナビゲーション バーは下部にあります。

ページを縦にスクロールしながら、2 つのことが必要です。

  1. グリッドビュー ヘッダーも固定する必要があります。
  2. gridview ページャも凍結する必要があります。

つまり、データと一緒にスクロールするべきではありません。
行のみをスクロールする必要があります。

私は実装しました -
1. CSS 2. を使用して固定ヘッダー. CSS
を使用して水平方向にスクロール可能
3. CSS を使用して垂直方向にスクロール可能


1. Pagerを修正します。

私のコード:

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

4

1 に答える 1