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