jQueryライブラリを使用して、EXCELのように操作できる画面を簡単実装

技術
#Higuchi #JavaScript
jquery_handsontable

こんにちは、樋口です。

WEB上でEXCELのように操作できる画面を簡単に実装することができるライブラリ、「handsontable」についてご紹介します。
今回は、ライブラリのダウンロードから簡単な実装までについての説明となります。

下記ライブラリを使用して説明をしていきます。

jQuery
1.10.2
handsontable
0.31.2
BootStrap
3.2.0

ライブラリの入手

handsontableは下記サイトよりダウンロードできます。
handsontableダウンロード(GitHub)

ZIPファイルダウンロード後、ZIPファイルの中身の下記ファイルとフォルダを任意の場所へ解凍します。
– handsontable.full.min.css
– handsontable.full.min.js


これで準備は完了です。



HTMLファイル

初めに、HTMLファイルを作成します。


– index.html



10行目:
 handsontableで使用するCSSを読み込みます。


39行目:
 EXCELの入力項目を表示するための、「div」要素を設定します。


46行目:
 handsontableで使用するjavaScriptを読み込みます。


以上で、HTMLは完成です。
次に、スクリプトを有効にするための、javaScriptについて説明します。



javaScriptファイル

次に、ライブラリ実行用のjavaScriptファイルを作成します。


– test.js



2~9行目:
 EXCELに初期表示する、データ配列を初期化しています。
 ※ 今回のサンプルでは、「8×8」のセルが作成されます。

14~25行目:
 対象の要素に対して、Handsontableの初期化を行います。



実行結果

最後に、実行イメージを下記に載せます。


– 通常入力
EXCEL1

– 文字削除
EXCEL2.gif

– セルのコピー
EXCEL3


最後に

今回紹介したライブラリを使用すれば、EXCELと同じ画面が簡単に出来上がります。
操作の感覚もEXCELとほぼ一緒なので、是非機会があったら使用してみてください。
もっと便利な使い方ができそうなので、機会があればまたご紹介しようと思います。

今後もjavaScriptの便利ライブラリについて紹介していけたらと思っています。

それではまた。




《関連記事》
jQueryライブラリを使用して、簡単Form項目の入力チェック実装
jQueryライブラリで、注釈を使用したチュートリアルページの簡単実装
jQueryライブラリを使用して、テーブル内のデータをXLS/XLSX/CSV/TEXT形式で簡単ダウンロード
jQueryライブラリを使用して、簡単画像ギャラリーページの実装
jQueryライブラリを使用して、テキストをランダム文字列でシャッフルしながら表示