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

#JavaScript

記事をシェア：

コピー

こんにちは、樋口です。

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

<!DOCTYPE html>
<html lang="ja">
  <head>
	<meta charset="utf-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<meta name="description" content="">
	<meta name="author" content="">
	<title>handsontableサンプル</title>
    <link rel="stylesheet" href="./bootstrap.min.css">
    <link rel="stylesheet" href="./handsontable.full.min.css">
	<style type="text/css">
	<!--
		.container {
		  width: 1160px;
		  margin: 0 auto;
		  padding: 50px 40px;
		  box-sizing: border-box;
		}
		.tatle-style {
		  margin: 0 0 50px;
		  padding-bottom: 15px;
		  border-bottom: 1px solid #eeeeee;
		}
	-->
	</style>
  </head>
  <body>  
	<div id="wrap">
	  <div class="container">
		<div class="col-lg-12">
		  <div class="form-group" style="text-align: center;">
			<h1 class="tatle-style">handsontableサンプル</h1>
		  </div>
		  <div class="form-group">
			<span></span>
		  </div>
		  <form class="form-signin" id="commentForm">
            <div class="col-lg-12" style="margin-top: 10px; margin-left: 290px;">
              <div id="testTable"></div>
            </div>
		  </form>
		</div>
	  </div>
	</div>
    <script type="text/javascript" src="./jquery.js"></script>
    <script type="text/javascript" src="./handsontable.full.min.js"></script>
    <script type="text/javascript" src="./test.js"></script>
  </body>
</html>

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

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

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

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

javaScriptファイル

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

– test.js

$(function() {
	var data = [
		["test1", "100", "", "", "", "", "", ""],
		["test2", "200", "", "", "", "", "", ""],
		["test3", "300", "", "", "", "", "", ""],
		["test4", "400", "", "", "", "", "", ""],
		["", "", "", "", "", "", "", ""],
		["", "", "", "", "", "", "", ""],
		["", "", "", "", "", "", "", ""],
		["", "", "", "", "", "", "", ""]
	];

	var elem = document.getElementById('testTable');
	new Handsontable(
		// 初期化対象のエレメントを設定
		elem, 
		{
			// 初期化するデータ要素を設定
			data: data,
			// 固定の列要素を表示するかの設定
			rowHeaders: true,
			// 固定の行要素を表示するかの設定
			colHeaders: true
		}
	);
});

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

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

実行結果

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

– 通常入力
EXCEL1

– 文字削除

– セルのコピー
EXCEL3

最後に

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

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

《関連記事》