QA@IT

GridViewでヘッダーを固定する方法について。

27966 PV

GridViewでヘッダーを固定する方法が分からなくて困り果てております。

ソース

<%@ Page Language="VB" AutoEventWireup="false" CodeFile="TEST.aspx.vb" Inherits="TEST" %>
 <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" 
      "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head runat="server">
    <title></title>
    <style type="text/css">
    .Freezing
    {
        color:White;
        font-weight:bold;
        text-align:left;
        position: relative;
        border-width:0;
        z-index: 10;
    }
    </style>
</head>
<body>
    <form id="form1" runat="server">
    <asp:Label ID="Label1" runat="server" Text="Label" CssClass="strfont" ></asp:Label>
    <div id="freezingDiv" style="OVERFLOW: auto; HEIGHT: 250px">
        <asp:GridView ID="GridView1" runat="server" AutoGenerateColumns="False" 
      DataSourceID="ObjectDataSource1">
            <HeaderStyle  CssClass="Freezing"/>
            <Columns >
                <asp:BoundField DataField="TEST_CD" HeaderText="TEST_CD" />
                <asp:BoundField DataField="TEST_NM" HeaderText="TEST_NM" />
            </Columns>
        </asp:GridView>
    </div>
    <asp:ObjectDataSource ID="ObjectDataSource1" runat="server" SelectMethod="siire" TypeName="getDB">
  </asp:ObjectDataSource>
    </form>
</body>
</html>

開発環境

  • VisualStudio2010
  • ASP.NET4.0
  • IE 9

宜しくお願いします。

回答

手前味噌ですがこちら

こんなCSSを用意して

.scroll1 thead, .scroll1 tbody
{
    float: left;
}
.scroll1 tbody
{
    height: 100px;
    overflow-y: scroll;
}

DataBind時にTableSectionを変更すると行けます。

GridView1.DataSource = HogeList;
GridView1.DataBind();
if (GridView1.Rows.Count > 0))
{
    GridView1.HeaderRow.TableSection = TableRowSection.TableHeader;
}

ただし幅を指定する際はtrとtd両方に指定する必要があります。

編集 履歴 (0)

SurferOnWww 様

回答ありがとうございます。

提供していただいたサンプルのexpression関数を一度試してみようと思います。

一つ疑問があります、私がネットで調べた中のサンプルで
CSSを使って簡単にできると書いてあったのですが、
これは、現状の私の開発環境等が影響してできないのでしょうか?
実装できない原因がつかめなく、腑に落ちません。

参考サンプル
http://javasystem.blog4.fc2.com/blog-entry-427.html

宜しくお願いします。

編集 履歴 (0)
  • position: relative; と z-index: 10; を使うサンプルはIE6だと動きます。IE9では動きません。互換モードにすれば動くかもしれません。 -
  • やはり、開発環境面の問題でしたか。
    ありがとうございます。

    ちなみに、IE9で互換モードで試してみましたが、
    実現できませんでした。
    -

以下のサンプルはいかがですか?

GridView のヘッダ、列を固定
http://surferonwww.info/BlogEngine/post/2011/04/30/Freezing-GridView-header-and-column.aspx

GridView のヘッダ、列を固定(その 2)
http://surferonwww.info/BlogEngine/post/2013/02/04/freezing-header-and-column-of-gridview-by-using-javascript-gridjs.aspx

前者が CSS の Internet Explorer (IE) 独自実装である expression 関数を使ってテーブルのヘッダと列を固定する例です。後者は、JavaScript と css を使って GridView からレンダリングされる table の DOM をスクロール可能な表に置き換えるものです。

編集 履歴 (0)
ウォッチ

この質問への回答やコメントをメールでお知らせします。