例えば「Handsontable」でWEB見積・請求書システムを作る場合・・・

たいそうな見出しをつけましたが、ようは上の画像のように、EXCELっぽいインターフェースなんだから、見積書なんぞに使えるんでねぇの？ということです。
Handsontableについては、前回の記事を参考にしてください。

今回は、HTML＋PHP＋MySQL＋Javascript（jQuery）と「Handsontable」を使って、上の様なことをやってみたいと思います。
とはいえ、HTMLのところはそれほど難しくないです。前回とまったく同じ。

Excel風インターフェースを表示したい部分にIDを指定した要素を配置しておきます。

<div id="excel"></div>

そして、PHP＋MySQLから必要なデータを取得しておきます。見積・請求の詳細データですね。

// 結果を格納する配列
$details = array();
// SQLでごにょごにょやってデータをとってきます
$sql = "SELECT * FROM [テーブル] WHERE id='[条件]'";
$rs = mysql_query($sql);
while($row = mysql_fetch_assoc($rs)){
	$details[] = $row;
}

そのとってきたデータをJSON形式にします。

<script>
var data = [
<?php
	foreach($details as $d){
		echo "['".$d['rows']."', '".$d['name']."', '".$d['num']."', '".$d['label']."', '".$d['price']."', '".$d['memo']."'],"; 
	} 
?> 
]; 
</script>

あとで使うので、配列を一つ用意します。

fileds = ['rows','name','num','label','price','total','memo'];

Handsontableを書き出します。

var $container = $('#excel');
$container.handsontable({
	// 上で指定したデータを使って描画します
	data: data,
	// 列名を以下にします
	colHeaders: ["番号", "商品名", "数量","単位","単価","合計","備考"],
	// 行ラベルを表示します
	rowHeaders: true,
	// 最低12行は表示します
	minRows: 12,
	// 最低7列は表示します
	minCols: 7,
	// 列幅を指定します
	colWidths: [10,150,20,20,30,50,100],
	// 変更後に呼び出されるコールバック関数を指定します
	onChange: function(change, source) {
		if(source === 'loadData') return;
		// change[0]の中に、変更した行数、列数、変更前の値、変更後の値が
		// 配列で入っていますので、それを使って、変更された場所、値を呼び出します
		onField = fileds[change[0][1]];		// 変更フィールド名の取得
		onRow = change[0][0]+1;			// 変更行数の取得
		onData = change[0][3];				// 変更後のデータ取得
		$("#"+onField+onRow).val(onData);	// 値をセット
		onNum = $("#num"+onRow).val();		// 変更行の数量取得
		onPrice = $("#price"+onRow).val();	// 変更行の単価取得
		if(onNum*onPrice > 0){
			data[onRow-1][5] = onNum*onPrice;
		}else{
			data[onRow-1][5] = "";
		}
		$container.handsontable('render');
	}
});

オプションについてはカンタンに説明は書いてますが、詳しくはHandsontableの公式サイトを確認してください。
ようするに、14行目まではHandsontableの描画設定、15行目以降はHandsontableで変更があった際に、「input type=”hidden”」要素の値を書き換えにいっています。下の様に必要個数分だけhidden要素を用意しておけばいいわけです。

<input type="hidden" name="rows[1]" id="rows1" value="">
<input type="hidden" name="name[1]" id="name1" value="">
<input type="hidden" name="num[1]" id="num1" value="">
<input type="hidden" name="label[1]" id="label1" value="">
<input type="hidden" name="price[1]" id="price1" value="">
<input type="hidden" name="memo[1]" id="memo1" value="">
<input type="hidden" name="rows[2]" id="rows2" value="">
<input type="hidden" name="name[2]" id="name2" value="">
<input type="hidden" name="num[2]" id="num2" value="">
<input type="hidden" name="label[2]" id="label2" value="">
<input type="hidden" name="price[2]" id="price2" value="">
<input type="hidden" name="memo[2]" id="memo2" value="">
・・・

ちゃんと、数量か単価に変更があったら数量×単価がされるように26行目から指定しています。
最終的に31行目で再描画することで、合計値を表示しています。

このようにすれば、インターフェースをEXCELっぽくしてWEBアプリが作れます。
このプラグインは使い勝手がありそうです。