はじめに
jQueryの勉強をしようと思い立ち、面白そうなライブラリを探していたらHandsontableを見つけたので、さわってみた。
（基本的に通信なしで、HTMLで全て行う。）
(1) JSONファイルを読み込む
(2) JSONをHandsontableに渡して表示
(3) 表の内容をCSVにしてダウンロード
環境
Windows 8.1(64bit)
Internet Explorer 11
用意したもの
jQuery
* jquery-1.11.3.min.js
Handsontable
* handsontable.full.js
* handsontable.full.css
juantascon
* jquery.handsontable.csv.js
JSONファイル(自前)
data.json
{
"cars":[
{"Year": 2009, "Maserati": 0, "Mazda": 2941, "Mercedes": 4303, "Mini": 354, "Mitsubishi": 5814},
{"Year": 2010, "Maserati": 3, "Mazda": 2905, "Mercedes": 2867, "Mini": 412, "Mitsubishi": 5284},
{"Year": 2011, "Maserati": 4, "Mazda": 2517, "Mercedes": 4822, "Mini": 552, "Mitsubishi": 6127},
{"Year": 2012, "Maserati": 2, "Mazda": 2422, "Mercedes": 5399, "Mini": 776, "Mitsubishi": 4151}
]
}
内容
index.html
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Handsontable Test</title>
<link rel="stylesheet" type="text/css" href='css/handsontable.full.css'>
<script src='js/jquery-1.11.3.min.js'></script>
<script src='js/handsontable.full.js'></script>
<script src='js/jquery.handsontable.csv.js'></script>
<script>
$(document).ready(function () {
// 知らない人は「jquery.Deferred」で調べよう
var d = new $.Deferred();
var header;
var jsondata;
// (1) JSONファイルを読み込む
$.getJSON("json/data.json", function(sample) {
jsondata = sample.cars;
// Handsontableで表示するヘッダーをjsonから取得して配列に格納
// この辺ダサイんだけど、JSONデータ内の属性を一括で取得する方法とかないかな？
header = new Array();
var count = 0;
for(key in jsondata[0]){
header[count] = key;
count++;
}
d.resolve();
});
d.promise().then(function() {
// (2) JSONをHandsontableに渡して表示
var data =
jsondata,
container = document.getElementById('example'), //後ほど表を展開する要素を指定
hot;
// 表の定義
hot = new Handsontable(container, { //以下はデータ指定と表示オプション
data: data, //さっき作ったdataを指定
minSpareRows: 1, //表の一番下にいくつ空行を表示するか。今回は１行を空行にして表示する。
colHeaders: header, //カラムの名前を表示するかどうか colheader: true 表示/false 非表示
//カラムの名前を任意の名前にする colheader: 配列（カラム名）
rowHeaders: true, //ロウの名前を表示するか
contextMenu: true, //セルを右クリックしたときのメニューをすべて表示
columnSorting: true //カラムのヘッダーをクリックした際に昇順、再クリックで降順にソート
});
// 表上で以下のキーが押されても編集モードにならない
// 変換(28)、無変換(29)、カタカナ(241)、ひらがな(242)、漢字キー(243, 244)
hot.updateSettings({
beforeKeyDown: function(e){
if([28, 29, 241, 242, 243, 244].indexOf(e.keyCode) >= 0) {
e.isImmediatePropagationEnabled = false;
e.isImmediatePropagationStopped = function(){
return true;
}
}
}
});
// (3) 表の内容をCSVにしてダウンロード
$("input:button").click(function(){
// 表の状態を文字列にする。
var csv_string = handsontable2csv.string(hot);
var bom = new Uint8Array([0xEF, 0xBB, 0xBF]);
var blob = new Blob([bom, csv_string], { type: 'text/csv'});
// IE独自関数でダウンロード
window.navigator.msSaveBlob(blob, "test.csv");
});
});
// Handsontableのおまじない
// 以下は基本的にいじらない
function bindDumpButton() {
Handsontable.Dom.addEvent(document.body, 'click', function (e) {
var element = e.target || e.srcElement;
if (element.nodeName == "BUTTON" && element.name == 'dump') {
var name = element.getAttribute('data-dump');
var instance = element.getAttribute('data-instance');
var hot = window[instance];
console.log('data of ' + name, hot.getData());
}
});
}
bindDumpButton(); //関数実行
});
</script>
</head>
<body>
<div id="example" class="handsontable"></div>
<br>
<input type="button" value="csv"/>
</body>
</html>
参考
1.Qiita - Handsontableで日本語入力関連キーを無視する
2.Qiita - 【JavaScript】連想配列のkeyとvalueの取得
3.Qiita - 100万行扱えるグリッドw2ui GridとHandsontableの紹介
4.新人Webエンジニアの記録。- JavaScriptだけでファイルの保存機能を実装する
5.MSDN - Blob と msSaveBlob を使ってファイルをローカルに保存する