Tablekitの使い方 Tablekit

Tablekitの使用方法をご紹介しています。
Tablekitはtableにソート(並び替え)・リサイズ・編集機能を追加するAjaxライブラリです。
なお、このライブラリは、Prototypeが別途必要です。

公式サイト

  • ※ 2009年10月1日現在、オプション設定部分の説明は掲載していません。

サンプル

サンプルはセルのソート機能です。

No 名前 ローマ字
1 かきくけこ kakikukeko
3 あいうえお aiueo
2 さしすせそ sasisuseso

ダウンロードと設置

こちらからダウンロードして解凍します。
Prototypeのダウンロードは、こちらからできます。
解凍後、css、echo、jsディレクトリを任意の場所に設置します。
なお、Prototypeが設置されていない場合は、こちらからダウンロードしてjsディレクトリ内に格納してください。

JavaScriptおよびCSSの読み込み

以下のタグを<head>内に記載します。
パスは環境に合わせて変更してください。
※ ただしCSSファイルはtable要素に対して直接指定がされている部分が含まれるため、他でtableを使用している場合は、変更する必要があります。

HTML

table要素にclassを割り当てます。
項目部分を<thead>、内容を<tbody>で囲います。
なお、以下ソースはサンプルで使用したtableのソースです。

複数設定する場合は以下のように半角スペースで区切って使用します。
(以下のソースは、ソート、リサイズ機能のclassです。)

class 説明
sortable ソート(並び替え)
resizable リサイズ(横幅の大きさを変更)
editable 編集(セルの中身を変更)

また、editableを設定した場合、<head>内に以下のオプションを追加します。

初期でのソート

初期段階(ページのロード時)でソートをさせる場合は、ソートさせたい項目にclassを割り当てます。
なお、ソートさせたくない項目はnosortを指定します。

class 説明
sortfirstasc 昇順
sortfirstdesc 降順
nosort ソートの対象外(ソートの無効)

オプション

※ 2009年10月1日現在、オプションのみでその説明等は掲載していません。

オプション名 初期値
autoLoad true
stripe true
sortable true
resizable true
editable true
rowEvenClass 'roweven'
rowOddClass 'rowodd'
sortableSelector ['table.sortable']
columnClass 'sortcol'
descendingClass 'sortdesc'
ascendingClass 'sortasc'
noSortClass 'nosort'
defaultSortDirection 1
sortFirstAscendingClass 'sortfirstasc'
sortFirstDecendingClass 'sortfirstdesc'
resizableSelector ['table.resizable']
minWidth 10
showHandle true
resizeOnHandleClass 'resize-handle-active'
editableSelector ['table.editable']
formClassName 'editable-cell-form'
noEditClass 'noedit'
editAjaxURI '/'
editAjaxOptions {}