2010 年 4 月 8 日 木曜日
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) // 編集する特定のセル
とまぁ、ここまで、サンプルを作成するにあたって、本家英語サイトを自分なりにまとめてみた。
ので、解釈がちょっとおかしな所もあるかもしれないけど。。。
その時は、コメントなりで指摘して下さい。
折を見て、ソート編、リサイズ編、セル編集編もまとめてみようと思う。
まぁなんにせよ、こういうツールはホントに便利。
