PR

応用編!Ajaxで表計算機能

2008年9月18日(木)
清野 克行

グリッド表示に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); // コンボから選択の列数使用

次は、このグリッド表示画面での登録、更新、削除処理を見ていきます。

有限会社サイバースペース
慶應義塾大学工学部電気科卒。日本IBM、日本HPなどにおいて、製造装置業を中心とした業務系/基幹業務系システムのSE/マーケティングや、3階層C/Sアーキテクチャによる社内業務システム開発などに携わる。現在は、Ajax/Web 2.0関連のセミナー講師/コンサルティング、書籍執筆などを行っている。情報処理学会会員。http://www.at21.net/

Think IT会員サービス無料登録受付中

Think ITでは、より付加価値の高いコンテンツを会員サービスとして提供しています。会員登録を済ませてThink ITのWebサイトにログインすることでさまざまな限定特典を入手できるようになります。

Think IT会員サービスの概要とメリットをチェック

他にもこの記事が読まれています