CRUD対応のテーブル生成ライブラリ「miu.table.js」の紹介と使い方です。
GitHubでCRUD対応のテーブル生成ライブラリ「miu.table.js」を公開しています。
特徴
ライブラリを読み込んだ後、プロパティとデータを指定するとテーブルが表示されます。
CSS（見た目）はライブラリに含んでいないので、 サイトごとのスタイルを適用させやすくなっています。
外部依存が無いのでどのようなプロジェクトにも組み込みやすくなっています。jQueryも必要ありません。
デモ
サンプルを下記ページに作成しました。
サンプルと突き合わせながら下記説明を確認してください。
sample1
最も基本的なパターンです。
set関数でプロパティを設定します。
| プロパティ | 概要 |
|---|---|
| title | テーブルの上に表示するテーブル名を指定します。 |
| names | テーブルヘッダに表示する列名を配列で指定します。 |
| keys | データの列名を配列で指定します。 |
| types | データの型を配列で指定します。指定できる型は、'number', 'text', 'password', 'bool', 'custom-(カスタム処理)'です。 |
init関数でデータ配列を指定します。
データのキーはkeysプロパティで指定したキーを含む必要があります。
keysプロパティで指定しなかったキーを含んでいても問題ありません。後述するCRUD機能で、詳細表示にだけ使用するキーがデータに含まれる場合もあります。
sample2
テーブルヘッダをクリックすることで、その列で並べ替えをすることができます。
また指定した行数でページングを行うこともできます。
| プロパティ | 概要 |
|---|---|
| sort | 並べ替え機能を有効化します。true, false(または未指定)で指定します。 |
| psize | ページング機能を有効化します。1ページに表示する行数を配列で指定します。先頭の行数がデフォルトの行数となります。 |
| rdiv | psizeで指定した行数の区切り文字を指定します。未指定時は' | '(バーティカルバー)です。 |
| runit | psizeで指定した行数の単位を指定します。未指定時は' ROWS'です。 |
| pdiv | ページの区切り文字を指定します。未指定時は' | '(バーティカルバー)です。 |
| punit | ページの単位を指定します。未指定時は' PAGE'です。 |
| pfill |
最後のページをpsizeで指定した行数まで空行を出力します。true, false(または未指定)で指定します。
例えば、psize=5のとき、1行しかない場合、pfill=trueだと5行分表示します。pfill=falseだと1行しか表示しません。
|
sample3
CRUDの使い方のサンプルです。
actionプロパティでCreate, Read, Update, Deleteの定義を指定すると、テーブルの行が選択できるようになり、対応するアクションを呼び出せます。
また、JavaScriptの正規表現を使用して入力チェックを行うことができます。
| プロパティ | 概要 |
|---|---|
| action |
アクションをオブジェクトで指定します。指定したアクションラベルがテーブルの上に表示されます。
例えば、Createを許可する場合は{ 'C': '追加' }のように指定します。
|
各アクションごとのプロパティも指定する必要があります。
Createを許可する場合は、Cプロパティを指定します。
Createの流れは以下になります。
| Cプロパティ | 概要 |
|---|---|
| title | Createモードのときに、テーブルの上に表示するテーブル名を指定します。未指定時はテーブル名+' | '(バーティカルバー)+アクションラベル("追加"等)です。 |
| action | Createモードのときの、アクションラベルを指定します。ラベルを指定できるアクションは、'CANCEL', 'CONFIRM', 'RETURN', 'COMMIT'です。 |
| names | テーブル行ヘッダに表示する列名を配列で指定します。 |
| keys | データの列名を配列で指定します。 |
| types | データの型を配列で指定します。指定できる型は、'number', 'text', 'password', 'bool'です。 |
| regex | データ入力チェックに使用する正規表現を配列で指定します。 |
| emsg | データ入力チェックのエラーメッセージを配列で指定します。 |
| func | COMMITアクションで呼び出されるコールバック関数を指定します。サーバーにアクセスする場合はここで行います。 |
Readを許可する場合は、Rプロパティを指定します。
Readの流れは以下になります。
| Rプロパティ | 概要 |
|---|---|
| title | Readモードのときに、テーブルの上に表示するテーブル名を指定します。未指定時はテーブル名+' | '(バーティカルバー)+アクションラベル("参照"等)です。 |
| action | Readモードのときの、アクションラベルを指定します。ラベルを指定できるアクションは、'CANCEL'のみです。 |
| names | テーブル行ヘッダに表示する列名を配列で指定します。 |
| keys | データの列名を配列で指定します。 |
| types | データの型を配列で指定します。指定できる型は、'number', 'text', 'password', 'bool'です。 |
Updateを許可する場合は、Uプロパティを指定します。
Updateの流れは以下です。
| Uプロパティ | 概要 |
|---|---|
| title | Updateモードのときに、テーブルの上に表示するテーブル名を指定します。未指定時はテーブル名+' | '(バーティカルバー)+アクションラベル("編集"等)です。 |
| action | Updateモードのときの、アクションラベルを指定します。ラベルを指定できるアクションは、'CANCEL', 'CONFIRM', 'RETURN', 'COMMIT'です。 |
| pk | プライマリキーを配列で指定します。更新させたくないデータ列名を編集不可にします。 |
| names | テーブル行ヘッダに表示する列名を配列で指定します。 |
| keys | データの列名を配列で指定します。 |
| types | データの型を配列で指定します。指定できる型は、'number', 'text', 'password', 'bool'です。 |
| regex | データ入力チェックに使用する正規表現を配列で指定します。 |
| emsg | データ入力チェックのエラーメッセージを配列で指定します。 |
| func | COMMITアクションで呼び出されるコールバック関数を指定します。サーバーにアクセスする場合はここで行います。 |
Deleteを許可する場合は、Dプロパティを指定します。
Deleteの流れは以下です。
| Dプロパティ | 概要 |
|---|---|
| title | Deleteモードのときに、テーブルの上に表示するテーブル名を指定します。未指定時はテーブル名+' | '(バーティカルバー)+アクションラベル("削除"等)です。 |
| action | Deleteモードのときの、アクションラベルを指定します。ラベルを指定できるアクションは、'CANCEL', 'CONFIRM'です。 |
| names | テーブル行ヘッダに表示する列名を配列で指定します。 |
| keys | データの列名を配列で指定します。 |
| types | データの型を配列で指定します。指定できる型は、'number', 'text', 'password', 'bool'です。 |
| func | CONFIRMアクションで呼び出されるコールバック関数を指定します。サーバーにアクセスする場合はここで行います。 |
Sample4
特殊なデータの型であるpassword型とbool型のサンプルです。
password型の列は、入力モード時にHTMLのinput type="password"で表示されます。
また、CONFIRMアクション時に再入力を求められ、１回目と一致しない場合は入力エラーとなります。
再入力時のメッセージや、パスワードが1回目と2回目で一致しない場合の入力エラーメッセージはsetpp関数で指定します。
| setppプロパティ | 概要 |
|---|---|
| reenter | パスワード再入力時のメッセージを指定します。未指定時は"Re-enter password"です。 |
| notmatch | パスワードが1回目と2回目で一致しない場合の入力エラーメッセージを指定します。未指定時は"Password does not match. Re-enter password twice"です。 |
bool型の列はboolYおよびboolNプロパティで指定した表現で表示されます。
| プロパティ | 概要 |
|---|---|
| boolY | bool型の値がTRUE(1)の場合に表示する文字列を指定します。未指定時は"Y"です。 |
| boolN | bool型の値がFALSE(1以外)の場合に表示する文字列を指定します。未指定時は"N"です。""(空文字列)は無視されます。何も表示したくない場合は" "(半角スペース)を指定してください。 |
sample5
カスタム列のサンプルです。
データをそのまま表示せず、加工して表示する必要がある場合はカスタム列を使用します。
| プロパティ | 概要 |
|---|---|
| custom |
"カスタムキー" : "出力文字列"の形式で指定します。また、データの値を":(キー名)"(コロン+キー名)で参照できます。
例えば、keysに'animal','custom-ex1'がある場合、'ex1': '動物=:animal'のように指定します。するとcustom-ex1を指定した列には、"動物=(データの動物名)"が出力されます。
|