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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

handsontable2

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

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

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

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

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

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

Handsontableを書き出します。

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

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

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

  • このエントリーをはてなブックマークに追加
  • Pocket
  • LINEで送る

SNSでもご購読できます。

コメントを残す

%d人のブロガーが「いいね」をつけました。