JavaScript勉強の目的で、小規模のアプリをコーディングしています。
今回はその１つ「汎用テーブル」を制作したので紹介します。
資材は
https://github.com/nnnmu24/generaltable
よりDLしてください。
第１回 https://qiita.com/suwanishi77/items/02e2ddeb26f55928ee54
第２回 https://qiita.com/suwanishi77/items/39ca77ca076e5de3286f
JavaScriptのファイル構成について
- tableControl.js
処理の中心です。 - nnnUtil.js
ユーティリティクラスを定義しています。 - tableData.js
表データと表オプションを定義します。定義方法は第2回で説明しています。
主なクラスとその構成について
nnnUtil.jsはユーティリティ、tableData.jsはデータであり、tableControl.jsが処理の中心です。
tableControl.js内のクラス構成を示します。
概要としては
- ViewControl：画面全体を制御する。
- MenuAreaControl、ConfigAreaControl、DisplayChangeAreaControl、PagingAreaControl、TableControl：画面の各エリアの制御を受け持つ。
- TableState：表示に関する状態を持ち、クラス間でそれを受け渡す。
- TableConfig：設定エリア、表示変更エリアの設定情報。
画面の各エリアは、以下のように分類されています。
以下、各クラスの説明です。
- ViewControl
起動時にコールされ、全体の画面制御を実行します。
表データ、表オプション（サンプルではtableDataSource、tableColumnOptionArray）を受け取ります。
以下に示す各エリアの制御クラス「XXXAreaControl」を持ち、適切にそれらを実行します。
制御クラスは主に、該当エリア内の表示と画面操作イベントを定義します。 - MenuAreaControl
メニューエリア制御クラス - ConfigAreaControl
設定エリア制御クラス - DisplayChangeAreaControl
表示変更エリア制御クラス - PagingAreaControl
ページングエリア制御クラス - TableControl
表エリアの制御クラス
起動時にViewControlからコールされ、表データ、表オプションを解析します。
解析したデータは以下の属性を持つ表データクラスTableDataに保持します。- 文字列 tableCode：表コード
- 文字列 tableName：表名
- 配列 TableColumn tableColumnArray
- ID id：カラムのID、tableDataSourceより生成
- ID eventDisplayId：カラムを表示判定するためのイベント識別ID、tableDataSourceより生成
- 数値 index：カラムインデックス、tableDataSourceより取得
- 文字列 name：カラム名、tableDataSourceより取得
- 文字列 type：カラム型、tableDataSourceより取得
- 文字列 dateFormat：カラム型(日付)、tableDataSourceより取得
- 文字列 option：カラムオプション、tableDataSourceより取得
- マップ TableRecord：tableRecordMap
- ID id：レコードのID、tableDataSourceより生成
- ID eventDisplayId：レコードをを表示判定するためのイベント識別ID、tableDataSourceより生成
- 配列 valueArray：定義した表データの要素
- 配列 displayArray：画面に表示する表データの要素
- 配列 errorElementArray：表データ定義にエラーがある場合、そのメッセージを保持
上記に示す各エリア制御クラス「XXXAreaControl」は以下の属性tableStateとtableConfigを持ちます。
- TableState tableState 表示状態クラス。
- 表の表示/非表示に使用します。
- 画面操作のイベントが発生し、各エリアで変化しうる状態を本クラスに集約・保持します。
- 制御クラス間の状態の受け渡しは本クラスを介して行います。
- 状態は以下のものが存在します。
（●はTableConfigの値を元に導出する）- recordCheckSet：●レコードの表示/非表示選択状態 表「recordDisplaySet」チェック時に変更
- recordSearchSet：検索結果によるレコードの表示/非表示状態 設定「検索」時に変更
- recordPageSet：ページングによるレコードの表示/非表示状態 ページ変更時に変更
- columnSortArray：各カラムのソート状態 設定「ソート初期化」時とソート時と表再表示時に変更
- page：現在のページ数 ページ変更時と表再表示時に変更
- totalPage：●総ページ数 設定「pageRecordCount」入力時に変更
- TableConfig tableConfig 設定クラス。
- 保持すべきデータを定義します。
- 設定の変更（blur等のイベント発生時）の都度、ローカルストレージに保存するメソッドを実行します。
- 起動時にローカルストレージより以下の設定値を読み込み保持するメソッドを持ちます。
- parseErrorDisplay：表データの書式エラーを表示
- pageRecordCount：1ページの表示数（レコード）
- omitLength：長文を省略する文字数
- columnDisplayFlg：チェックしたカラムを表示
- recordDisplayFlg：チェックしたレコードを表示
- columnIndexDisplaySet：カラムの表示/非表示選択を保持するセット
- recordDisplaySet：レコードの表示/非表示選択を保持するセット
HYMLファイルについて
HTMLは1ファイルで、table.htmlです。
メニューエリア、設定エリア、表示変更エリア、ページングエリアのタグはtable.html内に直接記述しています。
表エリアは動的に生成します。生成するタグは以下のような構成になります。
<table>
<thead class="tableHead">
<tr>
<th>-</th>
<th>
<iniput type="checkbox" class="tableHeadCheck" id="table_cl_000">
<span class"tableColumnSortMarker">-<span>
<div class="tableColumn">xxxxxxxx</div>
</th>
<th>
<iniput type="checkbox" class="tableHeadCheck" id="table_cl_001">
<span class"tableColumnSortMarker">-<span>
<div class="tableColumn">xxxxxxxx</div>
</th>
:
:
:
</tr>
</thead>
<tbody class="tableBody">
<tr id="rc_000001">
<td><iniput type="checkbox" class="tableBodyCheck" id="table_rc_000001"></td>
<td class="tableValue" id="rc_000001_0">xxxxxxxx</td>
<td class="tableValue" id="rc_000001_1">xxxxxxxx</td>
<td class="tableValue" id="rc_000001_2">xxxxxxxx</td>
:
:
:
</tr>
<tr id="rc_000002">
<td><iniput type="checkbox" class="tableBodyCheck" id="table_rc_000002"></td>
<td class="tableValue" id="rc_000002_0">xxxxxxxx</td>
<td class="tableValue" id="rc_000002_1">xxxxxxxx</td>
<td class="tableValue" id="rc_000002_2">xxxxxxxx</td>
:
:
:
</tr>
:
:
:
</tbody>
<table>
デザインはstyle.cssに定義しているので、変更したい場合はこれを編集してください。