Tablekitの使い方

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

  • ※ 公式サイトは閉鎖されました。
    現在ライブラリのダウンロードを行うことができません。
No 名前 ローマ字
1 かきくけこ kakikukeko
3 あいうえお aiueo
2 さしすせそ sasisuseso

ダウンロードと設置

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

JavaScriptおよびCSSの読み込み

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

HTML

適用方法

table要素にクラス名sortableを割り当てます。
項目部分を<thead>、内容を<tbody>で囲います。

HTML

複数設定する場合は次のように半角スペースで区切って使用します。

HTML

クラス名 説明
sortable ソート(並び替え)
resizable リサイズ(横幅の大きさを変更)
editable 編集(セルの中身を変更)
  • ※ これらのクラス名はオプションで変更することができます。

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

JavaScript

初期でのソート

初期段階(ページ読み込み時)でソートをさせる場合は、ソートさせたい列の見出し要素にクラス名を割り当てます。
なお、ソートさせたくない項目はnosortを指定します。

HTML

クラス名 説明
sortfirstasc 昇順
sortfirstdesc 降順
nosort ソートの対象外(ソートの無効)

オプション

各種オプションが用意されています。

オプション名 初期値 説明
autoLoad true boolean ページ読み込み時に自動的に機能を付けるかどうか
stripe true boolean 1行おきに色を付けるかどうか
sortable true boolean ソート機能を付けるかどうか
resizable true boolean リサイズ機能を付けるかどうか
editable true boolean 編集機能を付けるかどうか
rowEvenClass 'roweven' String 偶数行のtr要素に付与されるクラス名
rowOddClass 'rowodd' String 奇数行のtr要素に付与されるクラス名
sortableSelector ['table.sortable'] Array 機能を適用する要素のセレクター
columnClass 'sortcol' String 機能が適用されている見出し列に付与されるクラス名
descendingClass 'sortdesc' String ソートの順序が降順状態の見出し列に付与されるクラス名
ascendingClass 'sortasc' String ソートの順序が昇順状態の見出し列に付与されるクラス名
noSortClass 'nosort' String ソートが無効になっている見出し列に付与されるクラス名
defaultSortDirection 1 Number 初期状態のソート順序の方向
1 = 昇順, 2 = 降順
sortFirstAscendingClass 'sortfirstasc' String 初期状態の昇順とするクラス名
sortFirstDecendingClass 'sortfirstdesc' String 初期状態の降順とするクラス名
resizableSelector ['table.resizable'] Array リサイズ(横幅の大きさを変更)機能の有効化するクラス名
minWidth 10 Number リサイズの最小幅
showHandle true Boolean リサイズ中のリサイズ予定の幅のガイドの表示をするかどうか
resizeOnHandleClass 'resize-handle-active' String 不明
editableSelector ['table.editable'] Array 編集機能の有効化するクラス名
formClassName 'editable-cell-form' String 編集中のセルに生成されるform要素のクラス名
noEditClass 'noedit' String 編集機能を無効化するクラス名
editAjaxURI '/' String 編集機能で"OK"ボタンを押した際にAjax処理するURL
editAjaxOptions {} Object Ajax処理する際のPrototype Ajax.Updater用のオプション

JavaScript

手動適用

任意のタイミングでTablekitの機能を割り当てるには、TableKitクラスまたはTableKit.[機能].initメソッドを使用します。

TableKitクラスはすべての機能が含まれているのに対して、TableKit.[機能].initメソッドは機能ごとに分かれています。

構文

JavaScript

サンプルコード

JavaScript

メソッド

次のメソッドが利用可能です。

TableKitクラスで利用可能なメソッド

メソッド 説明
sort(列の位置, 順序) ソートを行う
第一引数:列の位置で1から始まる番号で指定
第二引数:順序で昇順が1、降順が-1で指定
resizeColumn(列の位置, 幅) 列のリサイズを行う
第一引数:列の位置で1から始まる番号で指定
第二引数:リサイズする幅でpx値で指定(単位なし)
editCell(行の位置, 列の位置) 指定したセルに対して編集モードにする
第一引数:行の位置で1から始まる番号で指定
第二引数:列の位置で1から始まる番号で指定

TableKit.Sortableで利用可能なメソッド

メソッド 説明
init(要素[, オプション]) TableKitを適用
第一引数:適用するtable要素
第二引数:各種オプション
sort(要素, 列の位置, 順序) ソートを実行する
第一引数:適用するtable要素
     (initなど事前に適用している必要がある)
第二引数:列の位置で1から始まる番号で指定
第三引数:順序で昇順が1、降順が-1で指定

TableKit.Editableで利用可能なメソッド

メソッド 説明
init(要素[, オプション]) TableKitを適用
第一引数:適用するtable要素
第二引数:各種オプション
resize(要素, 列の位置, 幅) 列のリサイズを行う
第一引数:適用するtable要素
     (initなど事前に適用している必要がある)
第二引数:列の位置で1から始まる番号で指定
第三引数:リサイズする幅でpx値で指定(単位なし)

TableKit.Editableで利用可能なメソッド

メソッド 説明
init(要素[, オプション]) TableKitを適用
第一引数:適用するtable要素
第二引数:各種オプション
editCell(要素, 行の位置, 列の位置) 指定したセルに対して編集モードにする
第一引数:適用するtable要素
     (initなど事前に適用している必要がある)
第二引数:行の位置で1から始まる番号で指定
第三引数:列の位置で1から始まる番号で指定

サンプルコード

次のサンプルコードではTablekitクラスでメソッドを利用した場合のサンプルコードです。

JavaScript