【Ajax】HTMLのtableを拡張(行ストライプ、ソート、リサイズ、セル編集)するTableKit(基本編日本語訳)

ASP.NETにはGridViewがあるので、Ajaxを使ったtableのソートや編集機能は簡単に実装出来る。
しかしhtml単体、php、perlなどの言語でtableを作成し、そのtableにAjaxでソートやセル編集を実装するのに、ちゃんとしたサンプルを持ってなかったので。。。
今回、TableKitというPrototypeを使ったtable拡張のツールを使って自分なりのサンプルを作っておこうと試してみたので、備忘録代わりにメモ。

TableKitサンプル

名称	値段	備考
りんご	100	青森産のおいしいりんご
バナナ	120	今が食べごろ
桃	200	残りわずか
いちご	300	10個入り
みかん	150	甘くておいしい

サンプルをさわってもらうと分かるが、ヘッダをクリックするとソートする。
またヘッダセルの右ボーダーをドラッグアンドドロップして列のリサイズが出来る。
そして、編集したい項目をクリックするとそのセルだけを編集できる。

TableKitのインストール方法

まず本家TableKitのサイトから必要なファイルをダウンロードしサーバーにアップロード。
HTMLでスクリプトを読み込む。
prototype.jsとtablekit.jsは必須。
fastinit.jsは任意で。

<script type="text/javascript" src="prototype.js"></script>
<script type="text/javascript" src="fastinit.js"></script>
<script type="text/javascript" src="tablekit.js"></script>

そして対象のテーブルにclassを与える。

<table class="sortable resizable editable">

ここでは3つのclassを指定したが、それぞれ、

‘sortable’

ソート機能 (行をストライプ状にする)

resizable’

リサイズ機能

‘editable’

セル編集機能

ただし、’editable’ (セル編集機能)を指定した場合は、次のようにセルを編集するためのAjaxURIを設定する。

TableKit.options.editAjaxURI = '/scripts/echo.php';

テーブルにID属性がない場合は、自動で、tablekit-table-nn(nnはオートナンバー)振られる。

TableKitのオプション変数

TableKitは基本的にオプション変数を変更するだけで、色々と設定が可能。
オプション変数の一覧は以下の通り。

Option : Default
autoLoad : true:  //スクリプトを自動的でロードしたくない場合、falseに設定)
stripe : true: //行のストライプ化
sortable : true: //ソート機能
resizable : true: //リサイズ機能
editable : true: //セル編集機能
rowEvenClass : 'roweven': //行のストライプ化に使用されるcssのクラス
rowOddClass : 'rowodd': //行のストライプ化に使用されるcssのクラス
sortableSelector : ['table.sortable']: //ソート機能を付与するテーブルを指定するセレクタ
columnClass : 'sortcol': //ソート機能を付与する行のヘッダセルのcssクラス
descendingClass : 'sortdesc': //DESC(降順)ソート行のヘッダセルのcssクラス
ascendingClass : 'sortasc': //ASC(昇順)ソート行のヘッダセルのcssクラス
noSortClass : 'nosort': //ソートを行わない行のヘッダセルのcssクラス
defaultSortDirection : 1: //全ての行のソート方向の初期状態　1:昇順, -1:降順
sortFirstAscendingClass : 'sortfirstasc': //初期状態で昇順ソートをかける行のヘッダセルのcssクラス
sortFirstDecendingClass : 'sortfirstdesc': //初期状態で降順ソートをかける行のヘッダセルのcssクラス
resizableSelector : ['table.resizable']: //リサイズ機能を付与するテーブルを指定するセレクタ
minWidth : 10: //リサイズするカラムの最小幅(px)
showHandle : true: //リサイズ用のポインタを表示する。falseにするとポインタ無しでリサイズ可
resizeOnHandleClass : 'resize-handle-active': //マウスポインタがリサイズ位置(セルの右のボーダー)にあるときのcssクラス
editableSelector : ['table.editable']: //セル編集機能を付与するテーブルを指定するセレクタ
formClassName : 'editable-cell-form': //セル編集機能時のformに付与するcssクラス
noEditClass : 'noedit': //セル編集不可を指定するcssクラス(個別に指定可能)
editAjaxURI : '/': //セル編集データを処理するファイルのURI)
editAjaxOptions : {}: //セル編集で使用するPrototype Ajax.Updaterのためのオプション

オプション変数は次のように直接変更することが可能。

TableKit.options.rowEvenClass = 'even';

テーブルのID属性を使用すれば、個々のテーブルにそれぞれのオプションを付与することも出来る。

TableKitの適用方法

TableKitを適用させる場合、上記で示したように、適用させるtableにclassを与えるか、もしくは以下の方法のいずれかが使用出来る。

セレクタを指定して適用させる場合

例えば　class=”data-table”というテーブルに適用させる場合は、以下のようにしてセレクタを指定する。

TableKit.options.sortableSelector = ['table.data-table'];

手動で適用させる場合

TableKitのinit()関数で、以下のように特定のテーブル指定して適用させることが出来る。

TableKit.Sortable.init(table, {options});

TableKitオブジェクトをインスタンス化する方法

TableKitのオブジェクトは以下のようにインスタンス化することもできる。

var table = new TableKit(table, {options});

TableKitオブジェクトは、必要に応じてメソッド呼び出し各種設定をして指定する。
呼び出されない場合は自動的にデフォルト値で機能する。

table.sort(column, order) // ソートするカラム
table.resizeColumn(column, w) // リサイズするカラム
table.editCell(row, column) // 編集する特定のセル

とまぁ、ここまで、サンプルを作成するにあたって、本家英語サイトを自分なりにまとめてみた。
ので、解釈がちょっとおかしな所もあるかもしれないけど。。。
その時は、コメントなりで指摘して下さい。

折を見て、ソート編、リサイズ編、セル編集編もまとめてみようと思う。
まぁなんにせよ、こういうツールはホントに便利。

[tmkm-amazon]4873113911[/tmkm-amazon]