固定ヘッダーでスクロール可能なテーブルを実装する「Freezeheader」

「Freezeheader」は固定ヘッダーでスクロール可能なテーブルを実装するjQueryプラグインです。

Freezeheader

screenshot326

ありそうで無かったプラグインなのではないでしょうか。実装する方法は多く紹介されていますが、プラグインとしての提供は見かけません。テーブルにページネーションをつけるより固定ヘッダーでスクロール可能としたほうが、ユーザビリティが高いですね。

このようなテーブルです。

screenshot327

 

これをスクロールすると、ヘッダーは固定されデータがスクロールします。

screenshot328

 

それでは「Freezeheader」の実装方法をご紹介します。まずはjQuery含む外部ファイルを読み込みます。

<script src="js/jquery-1.9.1.js"></script>
<script src="js/jquery.freezeheader.js"></script>

 

HTMLはこのようにマークアップします。”table”タグの”class”を”gridView”に、データは”grid”と”gridAlternada”を交互にいれこむことで、行ごとに色が変わります。

<div id="container">
  <table class="gridView" id="table1">
  <thead>
    <tr><th>Culture Name</th><th>Display Name</th><th>Culture Code</th><th>ISO 639x</th></tr>
  </thead>
  <tbody>
    <tr class="grid"><td>af-ZA</td><td>Afrikaans - South Africa</td><td>0x0436</td><td>AFK</td></tr>
    <tr class="gridAlternada"><td>sq-AL</td><td>Albanian - Albania</td><td>0x041C</td><td>SQI</td></tr>
    <tr class="grid"><td>ar-DZ</td><td>Arabic - Algeria</td><td>0x1401</td><td>ARG</td></tr>
    <tr class="gridAlternada"><td>ar-BH</td><td>Arabic - Bahrain</td><td>0x3C01</td><td>ARH</td></tr>
    ....
    <tr class="grid"><td>be-BY</td><td>Belarusian - Belarus</td><td>0x0423</td><td>BEL</td></tr>
    <tr class="gridAlternada"><td>bg-BG</td><td>Bulgarian - Bulgaria</td><td>0x0402</td><td>BGR</td></tr>
  </tbody>
  </table>
</div>

 

CSSはこのように指定します。

/* ----------->>> GridView <<<----------*/
.gridView
{
  width: 100%;
  clear: both;
  margin: 10px 0;
  border: medium none !important;
  border-collapse: collapse;
}
.gridView tr td
{
  vertical-align: top;
}
.gridView thead tr, .footer
{
  font: bold 11px Arial;
  vertical-align: middle;
  text-decoration: none;
  text-align: center;
}

/* --->>> HeaderStyle (cabecalho) <<<---*/
.gridView thead tr
{
  color: #333;
  background: #fff url(../images/bg-header-grid.png) bottom repeat-x;
  vertical-align: middle;
  height: 25px;
}
.gridView thead tr th
{
  border-top: 1px solid #E2E6E6;
  border-bottom: 3px solid #E5E5E5;
  vertical-align: middle;
}
.gridView thead tr a
{
  font: bold 11px Arial, Verdana;
  color: #333;
  padding: 0 0 0 10px;
  text-decoration: underline;
  background: url(../images/Icones/ico-ordem.gif) left no-repeat;
  vertical-align: middle;
}
.gridView thead tr a:hover
{
  color: #06c;
  background: url(../images/Icones/ico-ordem-hover.gif) left no-repeat;
}

/* ------------>>> Grid <<<--------------*/
.grid, .gridAlternada, .gridDestacada
{
  font: 11px Arial,Verdana;
  text-align: left;
  text-align: center;
  vertical-align: middle;
}
.grid:hover, .gridAlternada:hover, .gridDestacada:hover
{
  color: #000;
  background: #D4E5F6 url(../images/bg-dia.png) 0 0 repeat-x;
}

.grid
{
  background-color: #fff;
}
/*RowStyle*/
.gridAlternada
{
  background-color: #eee;
}
/*AlternatingRowStyle*/
.gridDestacada
{
  background-color: #FFE082;
  color: #333;
}

/* -------->>> Link Grid's <<<-----------*/
.grid a, .gridAlternada a, .gridDestacada a
{
  color: #384249;
  text-decoration: none;
}
.grid a:hover, .gridAlternada a:hover, .gridDestacada a:hover
{
  color: #000;
  text-decoration: underline;
}

 

今回は実装紹介用に以下のCSSも指定しています。containerでテーブルの横幅を指定しています。

#container {
  width: 500px;
}

 

JavaScriptはこのように実装します。ここで指定した”height”がテーブルの高さになります。

$(document).ready(function () {
  $("#table1").freezeHeader({ 'height': '300px' });
})

 

するとこのように作ることができました。スクロール部が飛び出しているのが少し残念ですが、CSSで直せそうな気もしますね。

screenshot330

自分で実装することも可能ですが、プラグインを使ってさくっと作ってしまうと効率がよいです。ぜひ参考にどうぞ。

 

Home > JavaScript > 固定ヘッダーでスクロール可能なテーブルを実装する「Freezeheader」

Return to page top