応用編！Ajaxで表計算機能
グリッド表示に3つの機能を追加しよう
「第2回：DWRでAjaxプログラムをかんたん作成！（http://www.thinkit.co.jp/article/136/2/）」では、DWR（Direct Web Remoting）を使用したサーバー通信と、受信データでのグリッド表示例を紹介しましたが、今回はグリッド表示に以下のような機能追加を行ってみましょう。
- コンボボックスで指定した行数・列数でのグリッド表示
- DWRとグリッドコントロールを組み合わせたデータ登録、更新、削除機能
- 列合計および行合計などの表計算機能
今回もサンプルファイル（http://www.thinkit.co.jp/images/article/136/3/13631.zip）（13631.zip/3.57 KB）をダウンロードできるようにしているので、ぜひダウンロードしてコードを確認しながら、読んでみてください。
行数・列数選択でのグリッド表示
それでは、最初にコンボボックスでグリッドの行数と列数を選択後表示する処理を紹介します。
図1はコンボボックスでグリッドの行数を18行、列数を7列に指定して、グリッドを表示した画面です。列数の7という値はプルダウンリストから選択したものですが、行数の18という値はリストにはなく、コンボボックスに直接入力したものです。
このようにコンボボックスでは、選択リストにない場合直接入力することもでき、操作性を向上させることができます。操作手順としては、行数、列数指定後マウスフォーカスを列指定コンボボックスからほかに移すと、図1のようなグリッドが表示されます。
それでは、ここまでの機能をコンボボックスでの選択処理コードから見ていきます。
サンプルファイルのリスト1は行指定のコンボボックスを表示するプログラム記述です。各処理ステップの意味についてはコメントに記述していますが、「第2回：DWRでAjaxプログラムをかんたん作成！（http://www.thinkit.co.jp/article/136/2/）」で紹介したActiveWidgetsの標準的な処理手順で書かれています。なお、列指定のコンボボックスについても、最初に生成するオブジェクト名が異なるだけで、その後の記述はまったく同じです。
次に、コンボボックスでの行数と列数指定からグリッド表示を開始するイベントの扱いですが、この部分のプログラム記述はリスト2のようになります。
ControlTextChangedのイベントは、プルダウンリストからの選択または直接キー入力のどちらからでも発生し、選択または入力された行数と列数をそれぞれ変数rowsとcolsにセットします。ここまでは、HTMLフォームでのセレクトメニューとよく似た処理ですが、直接キー入力する時に違いが出てきます。特に、列数の選択時に処理上の違いが出てくるので列数選択の場合を例に紹介していきましょう。
セレクトメニューの場合は、選択によるイベントが発生すれば選択が確定し、グリッド表示に遷移することができます。しかしコンボボックスの場合、例えばキー入力で列数15を指定する場合、1を入力した段階でControlTextChangedイベントが発生してしまうと、列数1と認識されてしまいます。このイベントはプルダウンリストからの選択でも同じように発生するため、リストからの選択する場合もそのまま表示処理に移ることはできません。
したがって、表示処理の開始はほかのイベントから行う必要があり、これを行っているのがリスト2の最後にあるControlDeactivatedイベントです。このイベントはユーザーが行数と列数を指定後、フォーカスをほかに移すことによって発生し、匿名関数が呼び出されてグリッド表示用のshowGrid関数が実行されます。
グリッド表示処理については「第2回：DWRでAjaxプログラムをかんたん作成！（http://www.thinkit.co.jp/article/136/2/）」でも見てきましたが、今回の処理ではグリッド行数・列数指定の部分で違いがあります。前回のグリッド表示ではサーバーからの受信データから行数と列数を指定していましたが、今回のサンプルでは、以下のように行列指定をリスト2で所得されたrowsとcolsを使用します。
grid.setRowCount(rows); // コンボから選択の行数使用
grid.setColumnCount(cols); // コンボから選択の列数使用
次は、このグリッド表示画面での登録、更新、削除処理を見ていきます。
