JSONファイルを読み込んだ結果を、Handsontableを使って表示してみた。(ついでにCSVもダウンロード)
オリジナル
JSONファイルを読み込んだ結果を、Handsontableを使って表示してみた。(ついでにCSVもダウンロード) - Qiita
Qiitaからの移行記事です。
はじめに
jQueryの勉強をしようと思い立ち、面白そうなライブラリを探していたらHandsontableを見つけたので、さわってみた。 (基本的に通信なしで、HTMLで全て行う。)
(1) JSONファイルを読み込む (2) JSONをHandsontableに渡して表示 (3) 表の内容をCSVにしてダウンロード
環境
Windows 8.1(64bit) Internet Explorer 11
用意したもの
Handsontable * handsontable.full.js * handsontable.full.css
juantascon * jquery.handsontable.csv.js
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} ] }
内容
<!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, //表の一番下にいくつ空行を表示するか。今回は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 を使ってファイルをローカルに保存する.aspx)