Contents

5.4. データグリッド

この章では、JavaScript UI コンポーネントを使用し、縦横スクロールが可能なデータグリッドを組み込む手順について説明します。

JavaScript ファイルを読み込む

HTMLテンプレートのHEAD部にて、JavaScriptファイル「 datagrid.js 」を読み込みます。
※本コンポーネントを使用する際は、「 prototype.js 」が必須です。

<head>
  
  <script language="javascript" type="text/javascript"
            src="js/prototype/prototype_1_6_0.js"></script>
  
  <script type="text/javascript" src="ls/datagrid.js"></script>
</head>

データグリッドを構成するコンテンツを記述する

「 TABLE 」タグ内に「 THEAD / TBODY / TFOOT 」タグでコンテンツを記述することで、ボディにのみスクロールが適用されるグリッド表示が可能になります。

<div id="WorkGrig" class="DataGrid">
<table id="WorkGrigTable">
<thead>

ヘッダ

      <tr><th>日付</th><th>区分</th><th>開始</th><th>終了</th>
            <th>休憩時間</th><th>稼働時間</th><th>備考</th>
      </tr>

</thead>
<tbody>

ボディ

      <tr>
        <td>2007/12/01</td><td>出勤</td><td>02:30</td><td>20:45</td>
        <td>03:30</td><td>14:45</td><td>夜勤</td>
      </tr>
      <tr>…</tr>

</tbody>
<tfoot>

フッタ

      <tr><td></td><td>合計</td><td>-</td><td>-</td>
        <td>15:00</td><td>61:00</td><td>-</td>
      </tr>

</tfoot>
</table>
</div>

画面表示時のオブジェクト作成処理を記述する

HTML テンプレートの BODY 部の最後で、グリッドオブジェクトの作成処理を行います。

<body>
  …
  <script type="text/javascript"></script>
</body>

作成処理

画面のロード時に、「 ls.DataGrid 」オブジェクトを作成します。
第1パラメータにはグリッドを構成する「 DIV 」タグの ID を指定します。
第2パラメータでは連想配列で、以下の内容を指定します。

colWidths：各列のサイズ（ピクセル）を指定します。
colHeaderSize：横スクロールにおいて、固定する列数（左から）
bottomFooter：ボディ部とフッタ部の間に空行を挿入し、フッタ部をテーブルの底辺固定とするか否か。

グリッドの内容を書き換える

グリッドオブジェクトの「 update 」ファンクションを使用して、グリッドの内容を書き換えます。

<head>
  …
  <script type="text/javascript"></script>
</head>

グリッドの内容を書き換える（「 update 」）

第1パラメータにはグリッドを構成する「 DIV 」タグの ID を指定します。
第2パラメータには書き換える内容を設定します。

ページを表示する

縦横のスクロールが行えることを確認します。

Tips

その他、グリッドオブジェクトでは以下のファンクションが使用できます。

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

gd.setScrollTop(20);

パラメータに縦スクロールの開始位置（ピクセル）を指定します。

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

gd.setScrollLeft(50);

パラメータに横スクロールの開始位置（ピクセル）を指定します。

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

gd.scrollLast();

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

gd.adjust({colWidths:[150,100,70,70,70,70,100]});

パラメータには、オブジェクト作成時の第2パラメータと同じものが設定できます。