AMG Solution

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

こんにちは、樋口です。
 
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の便利ライブラリについて紹介していけたらと思っています。それではまた。
 
 
 
 
《関連記事》

HIGUCHI'S BLOG

樋口一成の記事

樋口一成の記事の最新情報をお届けいたします。

SAME CATEGORY BLOG

この記事と同様のカテゴリー記事

LOADING