はじめに

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 を使ってファイルをローカルに保存する