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