[ASP.NET] GridViewコントロールでヘッダーを固定しボディをスクロールする

ASP.NET

2014.05.052019.12.07

GridViewコントロールに多くのデータを表示する場合はページング機能が有効ですが、ここではページング機能を使わずに、ヘッダーを固定してボディをスクロール表示する方法について説明します。

jQuery の tbodyScrollというプラグインを使用します。

まず、画面のデザインコードは以下の通りです。

<html xmlns="http://www.w3.org/1999/xhtml" >

<head runat="server">
<script src="Scripts/jquery-1.4.1.min.js"></script>
<script src="Scripts/jquery.tbodyscroll.js"></script>
<script>
$(document).ready(function() {
  $('.demo').tbodyScroll({
    thead_height:   '30px',
    tbody_height:   '100px',
    tfoot_height:   '20px'
  });
});  

</script>
<style type="text/css">
.demo { border-collapse: collapse; }
.demo thead th { background-color: blue; color:white }
.demo tfoot th { background-color: green; }

th ,
td {width: 180px;}
</style>
</head>
<body>
    <form id="form1" runat="server">
 
        <asp:GridView ID="GridView1" runat="server" CssClass="demo" ShowFooter="True" OnRowCreated="GridView1_RowCreated">
            <AlternatingRowStyle BackColor="Gainsboro" />
        <Columns>
            <asp:BoundField DataField="Empno" HeaderText="Empno"/>
            <asp:BoundField DataField="Name" HeaderText="Name"/>
            <asp:BoundField DataField="Hiredate" HeaderText="Hiredate"/>
        </Columns>
        </asp:GridView>
    </form>
</body>
</html>

上記コードからもわかるとおり

が必要です(1.4.1で検証しましたが、おそらく他のバージョンでも動くと思われます）。
ダウンロードして Scriptsフォルダに配置します。
8行目の .demo は画面に配置したGridViewのCssClass属性の値に合わせます。
9行目は、GridViewのヘッダー高さ、10行目はGridViewのデータ表示部の高さ、11行目はGridViewのフッター高さです。
18行目は、GridViewのヘッダーの背景色を青に、前景色を白に設定しています。

次に、GridViewにデータを表示するコードです。

C#の例

// 従業員リストクラス
private class EmployeeList
{
    private string _empno;
    private string _name;
    private DateTime _hiredate;

    /// <summary>
    /// 従業員番号
    /// </summary>
    public string Empno
    {
        get { return _empno; }
        set { _empno = value; }
    }

    /// <summary>
    /// 指名
    /// </summary>
    public string Name
    {
        get { return _name; }
        set { _name = value; }
    }

    /// <summary>
    /// 入社日
    /// </summary>
    public DateTime Hiredate
    {
        get { return _hiredate; }
        set { _hiredate = value; }
    }
}

// ページロード時の処理
protected void Page_Load(object sender, EventArgs e)
{
    //ポストバック時はデータ再作成しない
    if (IsPostBack)
    {
        return;
    }

    List<EmployeeList> emplist = new List<EmployeeList>();

    // 100件のデータを作成
    for (int i = 0; i < 100; i++)
    {
        EmployeeList emp = new EmployeeList();

        emp.Empno = i.ToString().PadLeft(4, '0');
        emp.Name = "User Name" + i.ToString();
        emp.Hiredate = DateTime.Now.AddYears(-i);

        emplist.Add(emp);
    }

    //自動的に列が作成されないようにする
    this.GridView1.AutoGenerateColumns = false;
    GridView1.UseAccessibleHeader = true;
    this.GridView1.DataSource = emplist;
    this.GridView1.DataBind();
}

// 行作成時の処理
protected void GridView1_RowCreated(object sender, GridViewRowEventArgs e)
{
    switch (e.Row.RowType)
    {
        case DataControlRowType.Header:
            e.Row.TableSection = TableRowSection.TableHeader;   // theadを出力
            break;
        case DataControlRowType.DataRow:
            e.Row.TableSection = TableRowSection.TableBody;     // tbodyを出力
            break;
        case DataControlRowType.Footer:
            e.Row.TableSection = TableRowSection.TableFooter;   // tfootを出力
            break;
    }
}

ここで重要なのは、77～91行目です。
jqueryのtbodyScrollプラグインは、thead, tbody, tfoot要素に対して作用します。
「GridViewコントロールで thead, tbody, tfoot の要素を生成する」で紹介したとおり、GridViewはデフォルトではthead, tbody, tfootを出力しないため、77～91行で要素を作成する処理が必要になります。

上記コードを入力後、実行した結果は以下の図のようになります。