JavaScript製汎用テーブル（第3回：データ構造とクラスの説明）

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：設定エリア、表示変更エリアの設定情報。

画面の各エリアは、以下のように分類されています。
![Image2.png](https://qiita-image-store.s3.ap-northeast-1.amazonaws.com/0/409741/eb6776ef-84a2-564d-3ec6-ad997cf664e3.png)

以下、各クラスの説明です。

- 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に定義しているので、変更したい場合はこれを編集してください。