JavaScript勉強の目的で、小規模のアプリをコーディングしています。
今回はその１つ「汎用テーブル」を制作したので紹介します。
第１回 https://qiita.com/suwanishi77/items/02e2ddeb26f55928ee54
資材は
https://github.com/nnnmu24/generaltable
よりDLしてください。
表データの定義
定義するデータは表データと表オプションが存在します。
サンプルの表データは以下の通りです。
const tableDataSource = [
["SAMPLE01","映像作品リスト"],
["タイトル","ジャンル","鑑賞方法","鑑賞日","評価"],
["text","text","text","date.YYYY年MM月DD日","num"],
["","option01","","","option02"],
["アメリカのヒーローが大集合","アクション","","",""],
["余命少ない恋人と過ごす","恋愛","テレビ","2017年03月05日","3"],
["銀河を支配する帝国を打倒する","SF","DVD購入","2018年01月15日","5"],
["剣と魔法で闘う勇者","ファンタジー","動画配信サイト","2018年09月16日","1"],
["伝説の龍を育てる","ファンタジー","レンタルDVD","2019年02月05日","3"],
["王子様系の転校生に恋をする","恋愛","テレビ","2019年08月21日","2"],
["ドタバタ家族の海外ドラマ","コメディ","動画配信サイト","2019年05月05日","5"],
["とある王朝の栄枯","歴史","DVD購入","2018年11月03日","5"],
["続・とある王朝の栄枯","歴史","DVD購入","2019年08月21日","4"],
["学校一の不良を決める喧嘩祭","アクション","レンタルDVD","2017年07月11日","3"],
["豪華客船での恋物語","恋愛","映画館","2017年08月01日","5"],
["天下無双の剣豪","アクション","映画館","2020年01月04日","1"],
["伝説の傭兵が立ち上がる","アクション","映画館","2019年12月09日","4"],
["銀河を支配する帝国を打倒する・前日譚","SF","","",""],
["美大生全員が片想い","恋愛","映画館","2017年10月20日","5"],
];
サンプルの表オプションは以下の通りです。
const tableColumnOption = {
option01: ["<div style='color:red'>", "</div>"],
option02: ["★"],
};
表データの定義内容を説明します。
1行目から4行目は表の定義で、5行目以降が表の実データになります。
- 1行目、1要素目：表コード
表を識別するコード値を記述します。任意の文字を指定可能です。
設定を保存する際のキーに使用します。 - 1行目、2要素目：表名
表の名前を記述します。任意の文字を指定可能です。
表のタイトルとして表示します。 - 2行目：列名
各列の名称を記述します。任意の文字を指定可能です。
表のヘッダとして表示します。 - 3行目：列の型
各列がどの値であるかを示す型を記述します。文字列、数値、日付のいずれかとします。
型名はそれぞれ「text」「num」「date」です。
dateは"."を付与し日時書式を追記します（例「date.YYYY/MM/DD」）日時書式は後述のいずれかとしてください。
列の型は検索、ソート処理に影響します。
配列要素は列名と同数としてください。要素超過分は無視されます。
数値型、日付型を1つ以上定義した場合、表示変更エリアに数値絞込、日付絞込が表示されます。 - 4行目：列オプション
特定列の表データを装飾したい場合に、表オプションで定義したオプション名を記述します。装飾しない場合は空文字。
オプション名を記述した場合、該当列の表データの前後に表オプションの文字列を付与します。この文字列はHTMLとして解釈されます。
配列要素は列名と同数としてください。要素超過分は無視されます。
サンプルの場合、2列目にoption1が、5列目にoption2が適用されます。
これにより2列目は文字色が赤色に、5列目は先頭に"★"が追加されます。 - 5行目以降：表データ
表データの実値を記述します。
行の要素数に上限はありません。
値は任意ですが、数値型、日付型を指定した列はその定義に従った値にしてください。空文字は可能です。
列の要素数は列名と同数としてください。要素超過分は無視されます。
表の解析、異常ケース
初回表示時に表データの定義値が正当かをチェックし、不備があった場合その内容をダイアログで表示します。
チェック内容と、不正時のデフォルト値は以下の通りです。
- 表コード：未定義または空文字→デフォルト値「T0001」
- 表名：未定義または空文字→デフォルト値「デフォルト表」
- カラム名：空文字→デフォルト値「カラム1」「カラム2」・・・
- カラム型
カラム型不正→デフォルト値「text」
日付書式不正→デフォルト値「text」 - カラムオプション：不正なキー→デフォルト値 オプションなし
- 表レコード
カラム数に足りない→デフォルト値 空文字
数値型、日付型で不正→デフォルト値 空文字
列の型「日付型」の日時書式について
列の型に日付型を指定した場合、型名「date」の後に"."を付与し日時書式を追記します。
日時書式は以下に示す「日付要素」「時刻要素」または「日付要素 時刻要素」のいずれかとしてください。
例．
-
date.YYYY/MM/DD
-
date.HH:mm :ss
-
date.YYYY年MM月DD日 HH時mm分ss秒
"."以降を省略した場合はデフォルトで「YYYY/MM/DD HH:mm :ss」が適用されます。 -
日付要素
- YYYYMMDD
- YYYY/MM/DD
- YYYY-MM-DD
- YYYY年MM月DD日
- MMDD
- MM/DD
- MM-DD
- MM月DD日
-
時刻要素
- HHmmss
- HH:mm :ss（記載時はmm後の空白なしで）
- HH時mm分ss秒
- HHmm
- HH:mm
- HH時mm分