Excel風グリッド表示プログラミング

Excel風グリッド表示プログラミング

Excel風グリッド表示プログラミングについても、筆者がオリジナルのサンプルコードとそれを修正し抜粋したもの（以下、プログラム2）を元に解説していきます。筆者が修正したソースコードの抜粋は、こちらからダウンロードできます（13612.zip/1.09 KB）。

グリッド表示の場合も、基本的なプログラム処理ステップはコンボの場合と変わりませんが、設定する項目数がコンボボックスに比べて多くなっています。プログラム処理については右にコメントを入れてあるので、おおよその見当がつくと思いますので、グリッド表示処理では、ポイントになる点だけ触れていきます。

グリッド表示処理

オリジナルのサンプルコードを見ると、2行目から配列gridDataにグリッド表示のデータが定義されています（プログラム2では2行目以下を省略しています）。オリジナルのサンプルコードではこのように、JavaScriptにベタでデータが定義されていますが、このまま使用したのではDynamicHTMLと変わらず、実用性に欠けてしまいます。

Ajaxでは非同期通信でサーバーから受信したデータを動的に表示できることが特徴なのですから、この配列データをサーバーからの受信データに置き換える必要があります。本連載では、次回にDWR（Direct Web Remoting）を使用したサーバーサイドJavaとの通信機能を解説しますので、その中でサーバーから受信したデータの表示を行います。

そのほかに、グリッド機能の主な特徴として33行目の.setCellEditable(true)はグリッドセルを編集可能に指定しており、引数falseの場合は表示のみのグリッド機能になります。

41行目のsetFixedLeft（2）では、グリッド左端2列を横スクロールしても表示から外れないように指定しており、この指定はグリッド表示後も随時変更することができます。この辺りの機能はExcelなどデスクトップアプリケーションにかなり近いもので、Excelでの業務内容をWebに移行することも内容によっては可能と言えるでしょう。

このほかにも、メソッドでの指定やイベント処理でさまざまな機能がありますが、次回以降の解説の中で折に触れて見ていきたいと思います。

それでは、次回はグリッドのデータ表示を、サーバーサイドJava経由のデータベースを使用して行うリモーティングライブラリDWRの解説を行います。