Ajaxって、いろんなオっと思える動きをするものや、
サイトの使い勝手を良くするものが、次々に出てきていますが、
今回は、
行数がいっぱいあるテーブルを、
奇数行・偶数行ごとに互い違い色替えして見やすくしながら、
テーブルヘッダ（見出し）のクリックで、
パっとアイウエオ順や数字順に並び替えですることができる、
お役立ちmootool系スクリプト「sortableTable.js」を紹介したいと思います。
Ajax用のライブラリ（いろんなスクリプトのベースになる基本スクリプトファイル）は、
よく知られている物で、jquery、prototype、mootoolがあり、
それぞれのライブラリを利用した、テーブル内項目の並べ替えスクリプトが
いろいろとあります。
しかし、jqueryはともかく、他の2つのライブラリは混在すると動作がしないこともあり、
それぞれの系統のスクリプトを使うようにします。
なので、今回はmootoolを使いますので、
mootool系の「sortableTable.js」となります。
（Jqueryは、他のライブラリとのコンフリクトを防止する記述を加えることができるそうです。
これについては、また実験してみたいと思っています。）
------------------------------------------------------------------------------------------
まず、「sortableTable.js」のパッケージをダウンロードして解凍すると、
▽phatfusion「sortabletable」
http://www.phatfusion.net/sortabletable/
サンプル画面のHTML（ソースを参考にできます）と、
スクリプト本体の「sortableTable.js」および、
見た目をコントロールするCSSファイル「sortableTable.css」、
それに、テーブルヘッダに配置される小さい矢印の画像が格納された「images」フォルダ
が、入っていますので、任意のディレクトリに置くようにします。
ばらけると、ややこしくなりそうなので、1つのフォルダにまとめて置くと良い思います。
------------------------------------------------------------------------------------------
「sortableTable.js」のサンプルHTMLには、
その機能のひとつである、フリーワード検索が付いているのを見て取れます。
これは、たとえば、Filterのセレクタで「Firstname」を選び、
「k」と入力して送信ボタンをクリックすると、
「Firstname」の先頭に「k」が付いている行だけをピックアップして表示する、
というものです。
今回は、この機能の組み込み説明は割愛して、
並び替え機能についてのみご紹介したいと思います。
------------------------------------------------------------------------------------------
基本ライブラリの「mootools.v1.11.js」は、
別途ダウンロードが必要です。
▽「mootools.v1.11.js」のダウンロードができます。
http://www.4shared.com/file/60449402/6d8be95e/mootoolsv111.html
▽ちなみに、本家の「mootools」のダウンロード画面です（※バージョン1.2.2）
http://www.mootools.net/download
------------------------------------------------------------------------------------------
次に、組み込み開始です。
【01】
並び替えさせたいテーブルのあるHTMLファイルに、
「mootools.v1.11.js」「sortableTable.js」「sortableTable.css」を、
それぞれ<head></head>内に
<script type="text/javacript" src="任意のパス/mootools.v1.11.js"></script>
<script type="text/javacript" src="任意のパス/sortableTable.js"></script>
<link rel="stylesheet" type="text/css" href="任意のパス/sortableTable.css" />
を記述して読み込ませると準備完了です。
【02】
並べ替えしたいテーブルに「class="sortable"」と「id="任意のid名（デフォルトでは『myTable』）"」をつけます。
【03】
次に、並べ替えしたい項目があるテーブルヘッダ<th></th>に、
文字順（アルファベットや日本語）の時は「axis="string"」
数字（0123）順の場合は「axis="number"」
日付（YYYY-MM-DD）順の場合は「axis="date"」
を記述します。
【04】
数字と日付は問題ないのですが、並び替えの基本は英数字になるので、
日本語でソートさせるには、少し手間が要ります。
※漢字混在でもソートの機能は働きますが、予期しない並び替え結果になります。
以下、手順です。
１）まず、フリガナ（カタカナかひらがな）を用意します。
２）次に、フリガナを<span></span>か他の適当なタグに任意のクラス名をつけて、
画面に表示させたい文言の前に記述します。
３）スタイルシートで、画面に表示しないようにします。
ただし、display: none; 以外の方法を用います。
【05】
テーブル直下に、そのテーブル用の動作のためのスクリプトを記述します。
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
※1つのページの中に、並び替えしたいテーブルが複数ある場合は、各テーブルのid名を変更する必要があります。
テーブルのid名をデフォルトの「myTable」から他の任意の名前に変えたときは、
上記スクリプト内の
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
の、sortableTableの()内「myTable」を、そのid名に替えるようにします。
（例：テーブルのid名をyourTableに替える）
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('yourTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
手順は以上です。
------------------------------------------------------------------------------------------
以下は、記述のサンプルです。
１）テーブルタグに「class="sortable"」をつければ、動作するようになります。
２）<span></span>にはclass="ruby"（このクラス名は任意）をつけておいて、画面には表示しないようにします。
《HTML＋JAVASCRIPT》
<table cellpadding="0" cellspacing="0" class="sortable" id="myTable" summary="住所録">
<thead>
<tr>
<th axis="string">施設名</th>
<th axis="string">所在地</th>
<th axis="number">TEL</th>
</tr>
</thead>
<tbody>
<tr>
<td><span class="ruby">トアルシセツ</span>戸有施設</td>
<td><span class="ruby">オオサカシチュウオウク</span>大阪市中央区</td>
<td>06-1234-5678</td>
</tr>
↓
以下続く
↓
</tbody>
</table>
<script type="text/javascript">
var myTable = {};
window.addEvent('domready', function(){
myTable = new sortableTable('myTable', {overCls: 'over', onClick: function(){alert(this.id)}});
});
</script>
《CSS》
table.sortable td span.ruby{
display: block; height: 1px; position: relative; margin-top: -1px; text-indent: -9999px; overflow: hidden;
}
（解説）
１）インライン要素としての<span></span>をブロック要素（ボックス）にする。
２）ボックスの高さ幅を1pxにする。
３）位置決めを「相対」に設定する。
４）上間隔を「-1px」とする。（ネガティブマージン）
５）テキスト（の一行目）を-9999px移動させる。
６）ボックスから溢れるテキストは表示させない。
これ以外のCSSは、デフォルトで用意されているので、ページのデザインにあわせて、適当に変更します。
※デフォルトのCSSファイルには、「table.sortable」の記述はありませんので、
各スタイルシートのセレクタに、table.sortable（の後に半角スペース）をつけるようにしてください。
（例：デフォルトから、セレクタ先頭に、「table.sortable」をつける）
table {
border: 1px solid #ccc;
width: 100%;
}
th {
background-color: #eee;
background: #eee url(images/icon-table-sort.png) no-repeat 2px 8px;
padding: 4px 4px 4px 14px;
}
↓
table.sortable {
border: 1px solid #ccc;
width: 100%;
}
table.sortable th {
background-color: #eee;
background: #eee url(images/icon-table-sort.png) no-repeat 2px 8px;
padding: 4px 4px 4px 14px;
}
なお、「sortableTable.js」を施すテーブルの各行は偶数行・奇数行で見た目を、
スタイルシートで替えることができるのも特徴です。
以下は、サンプルです。
《CSS》
table.sortable tr {
background-color: #eee;
}
table.sortable tr.altRow {
background-color: #fff;
}
「tr.altRow」が奇数行で、ただの「tr」が偶数行になります。
サンプルでは、偶数行が背景色にうすいグレー、奇数行の背景色は白になります。
さらに、各行にマウスがロールオーバーした際は
table.sortable tr.over {
background-color: #ffff00;
}
と、することで、違う背景色にすることができます。
------------------------------------------------------------------------------------------
「sortableTable.js」は、
ページの読み込み時に動作するので、HTMLにする前の原稿整理の段階で、
いちいちアイウエオ順や数字順に並び替えしなくてはならない、
なんて、めんどうくさいことから逃れられる、プチうれしい便利さがあります。
（もちろん動作には、有る程度の時間を要しますが）
「sortableTable.js」ダウンロードは下記から可能です。
サンプルが掲載されていますので、動作も見られますよ。
▽phatfusion「sortabletable」
http://www.phatfusion.net/sortabletable/
▽「mootools.v1.11.js」のダウンロード
http://www.4shared.com/file/60449402/6d8be95e/mootoolsv111.html
【まとめ】
１）テーブル内の項目を並べ替えするスクリプトに、mootool系の「sortableTable.js」がある。
２）「sortableTable.js」には、並べ替え機能と、検索による行のピックアップ機能、奇数行・偶数行のスタイル変更機能がある。
３）アイウエオ順で並び替えする場合は、フリガナを記述しておく必要がある。
４）1つのページに並べかえしたいテーブルが複数ある場合、各テーブルでid名を替えておく必要があり、
動作のためのスクリプトの該当箇所も、同様に変更しておく必要がある。
2009年04月30日
この記事へのコメント
コメントを書く
この記事へのトラックバック
