応用編！Ajaxで表計算機能

グリッド表示データでの表計算機能

図3は、東京都区のデータを使用して列合計を計算・表示した画面例です。

画面上の操作では、例えば都区男性人口の合計を求める場合、画面左上ラジオボタンでの「列合計」を選択後、最初に1行2列（千代田区の男性人口）をクリックします。次に12行2列（世田谷区の男性人口）をクリックすれば、図3のように13行2列に12区合計の男性人口が表示されます。

行合計の場合も同様の操作ですが、例えば3行1列をクリック後、3行5列をクリックすれば、3行6列に港区各データの合計値が表示されます（ただしこのサンプルでの実際の意味合いはありません）。

このように、Excelなどの場合とほとんど変わらない操作性で表計算機能が実現できています。ではこのプログラム処理を見ていきましょう。

合計が表示されるまでの処理

最初にグリッド内のセルクリックで、クリックされた行と列の値を所得する処理を見ていきます。グリッド内でのマウスクリックでリスト8のonCellClickedが匿名関数を起動します。

起動された匿名関数の第二、第三引数にはそれぞれクリックされた列番号と行番号（ecol、erow）が自動でセットされており、その値を引数指定して、例えば列合計計算の場合はcalcColSum関数が呼ばれます。このようなイベント処理用関数はActiveWidgetsのライブラリソースに用意されており、匿名関数内への処理記述のみで済むようになっています。

次にリスト9のcalcColSum関数を見ていきます。この関数ではcol1とrow1をif文で判断し処理を切り分けています。

このサンプルでは関数起動時にcol1とrow1が-1に初期化されています。したがってリスト7のif文評価が真（しん）となるのは最初にグリッドがクリックされた時になり、この列番号と行番号が変数col1、row1にセットされます。

次に2回目のマウスクリック時にはelse if以下のブロックが実行され、最初に行番号と列番号が変数col2、row2にセットされ、次に列合計の計算に入ります。列合計の計算では、二次元配列cdat[][]にグリッドセルデータがセットされているので、クリック選択された範囲の値を集計するだけで済んでしまいます。

計算処理する上でのチェックポイントとしては、プリミティブ型のないJavaScriptの場合、parseFloat関数で数値データ型を確定しておき、isNaN関数で数値以外の入力値を計算から除外するようにします。

以上の処理で列合計を計算後、グリッドに列合計を表示します。この処理は、grid.setCellText(cdat);でグリッドオブジェクトに合計計算後、$("grid").innerHTML = grid;でグリッド表示ノードに渡すことで表示されます。

今回はExcelに近い操作性のグリッド表示を紹介しましたが、同様の処理手順で行列総合計の計算や、行列平均の計算などを行うこともできます。最終回となる次回はグリッド表示データから、棒グラフや折れ線グラフなどのグラフ表示を行うサンプルを紹介します。