5.5. ツリーグリッド
この章では、JavaScript UI コンポーネントを使用し、データグリッドとツリービューをあわせたツリーグリッドを組み込む手順について説明します。
JavaScript ファイルを読み込む
HTMLテンプレートのHEAD部にて、JavaScriptファイル「 treegrid.js 」を読み込みます。
※本コンポーネントを使用する際は、「 prototype.js 」「datagrid.js」が必須です。
<head>
  <!-- prototype.jsの読み込み -->
  <script language="javascript" type="text/javascript"
            src="js/prototype/prototype_1_6_0.js"></script>
  <!-- datagrid.jsの読み込み -->
  <script type="text/javascript" src="ls/datagrid.js"></script>
  <!-- treegrid.jsの読み込み -->
  <script type="text/javascript" src="ls/treegrid.js"></script>
</head>
ツリーグリッドを構成するコンテンツを記述する
「 TABLE 」タグ内の構成はデータグリッドと同様です。
<div id="'WorkSummaryGrig'" class="DataGrid">
  <table id="WorkGrigTable">
    <thead>
ヘッダ
      <tr><th></th><th>合計時間</th>
      </tr>
    </thead>
    <tbody>
ボディ
      <tr _rowid="tr1" _toggle="-">
        <td>すべて</td><td>128:45</td>
      </tr>
      <tr _rowid="tr11" _pid="tr1" _toggle="-">
        <td>部署 1</td><td>38:45</td>
      </tr>
      <tr _rowid="tr12" _pid="tr1" _toggle="-">
        <td>部署 2</td><td>80:00</td>
      </tr>
      <tr>…</tr>
    </tbody>
  </table>
</div>

「 TR 」タグの属性（「 _rowid 」「 _pid 」「 _toggle 」）

  • _rowid：その行を識別する一意のキーを指定します。(必須)
  • _pid：子ノードの場合、親ノードの「 _rowid 」を指定します。
  • _toggle：トグルの初期状態を指定します
画面表示時のオブジェクト作成処理を記述する
HTML テンプレート の BODY 部の最後で、グリッドオブジェクトの作成処理を行います。
<body>
  …
  <script type="text/javascript"><!--
      // グリッドオブジェクトを生成
      gd = new ls.TreeGrid('WorkSummaryGrig',
                    {colWidths:[180,100,100,100,100,100,100],
                      colHeaderSize:1,　bottomFooter:false,
                      onToggleClick:toggleClick }
                    );
  // --></script>
</body>

作成処理

画面のロード時に、「 ls.TreeGrid 」オブジェクトを作成します。
第1パラメータにはグリッドを構成する「 DIV 」タグの ID を指定します。
第2パラメータでは連想配列で、以下の内容を指定します。
  • colWidths：各列のサイズ（ピクセル）を指定します。
  • colHeaderSize：横スクロールにおいて、固定する列数（左から）
  • bottomFooter：ボディ部とフッタ部の間に空行を挿入し、フッタ部をテーブルの底辺固定とするか否か。
  • expanded：展開可能な状態を示す文字（指定なしの場合「 + 」）
  • collapsed：折り畳み可能な状態を示す文字（指定なしの場合「 - 」）
  • treeToggleColumn：トグルを配置する列インデックス（指定なしの場合、「0」）
  • onToggleClick：トグルをクリックした際に呼び出すJavaScript関数名（指定なしの場合、関数の実行は無し）
トグルクリック時処理を記述する
HTML テンプレートで、トグルをクリックした際に呼び出すJavaScript関数を定義します。


※下記の例では、クリックした行に子ノードが既に存在する場合は展開／縮小を行い、存在しない場合は、アクションメソッドを呼び出して データベースの検索結果をクリックした行の子ノードとして追加しています。
  <script type="text/javascript"><!--
      //トグルをクリックした際の処理
      function toggleClick(elm) {
        //子ノードが存在しない場合
        if (!gd.hasChild(elm.getAttribute('_rowid'))) {
          //イベント発生エレメントを保持
          el = elm;
          //対象となる部署コードを取得
          var row = this.getElementByRowId(elm.getAttribute('_rowid'));
          //子ノードを検索
          ls.ajax('searchEmpSummary',
                    ajaxUpdateUITable, row.getAttribute('_deptcode'));
        }
        //子ノードが存在する場合
        else {
          //空を追加(＝ 展開／縮小が行われるだけ)
          gd.insertRow(elm, '');
        }
      }
  // --></script>

クリックした行の子ノードの存在を調べる（「 hasChild 」）

本関数の引数「 elm 」には、クリックしたトグルオブジェクトが渡されます。
このトグルオブジェクトの属性「 _rowid 」とは、グリッドを識別する一意のキーを表します。
このキーを引数にして、グリッドオブジェクトの「 hasChild 」ファンクションから、クリックした行の子ノードの存在を調べることができます。

クリックした行の行オブジェクトを取得する（「 getElementByRowId 」）

前述のキーを引数にして、グリッドオブジェクトの「 getElementByRowId 」ファンクションから、クリックした行オブジェクトを取得することができます。
  <script type="text/javascript"><!--
      var ajaxUpdateUITable = {
        asynchronous: 'false',
        onComplete: function(response) {
          //取得したコンテンツを追加
          gd.insertRow(el, response.content);
          //イベント発生エレメントを破棄
          el = null;
        }
      }
  // --></script>

クリックした行に子ノードを追加する（「 insertRow 」）

第1パラメータには追加する行のトグルオブジェクトを指定します。
第2パラメータには書き換える内容を設定します。以下、設定内容の例です。
  <tr _toggle="+">
    <td>テスト</td>
    <td>123,456</td>
  </tr>
設定内容は、「 TR 」タグ以下を記述します。
  • _rowid：その行を識別する一意のキーを指定します。（指定なしの場合、自動的にキーが振られます）
  • _toggle：トグルの初期状態を指定します。追加する行が最下層の場合は、記述する必要はありません。
ページを表示する
縦横のスクロール、ツリーの展開／縮小が行えることを確認します。
Tips
その他、グリッドオブジェクトでは以下のファンクションが使用できます。

グリッドの縦スクロール位置を設定する（「 setScrollTop 」）

  gd.setScrollTop(20);
パラメータに縦スクロールの開始位置（ピクセル）を指定します。

グリッドの横スクロール位置を設定する（「 setScrollLeft 」）

  gd.setScrollLeft(50);
パラメータに横スクロールの開始位置（ピクセル）を指定します。

グリッドの最後まで縦スクロール位置を移動する（「 scrollLast 」）

  gd.scrollLast();

グリッドを再調整する（「 treeAdjust 」）

  gd.treeAdjust({colWidths:[150,100,70,70,70,70,100]});
パラメータには、オブジェクト作成時の第2パラメータと同じものが設定できます。