表を操作する
HandsonTableの基本
HandsonTableを使うと表のデータの書き換えや、行・列の追加などが簡単にできます。商用利用は有料(年$899～)です。
下記の表はcellのデータの書き換えやソートが可能です。A、B、Cの文字をクリックすると、昇順、降順にソートができます。
handsontableのサイト(使い方の詳しい説明がついています)
GitHubのhandsontableのサイト
Qiitaの参考サイト1（導入と設定）
Qiitaの参考サイト2（実装）
Qiitaの参考サイト3（行・列を挿入・削除など）
Qiitaの参考サイト4（「わんすけに聞いてみる」さんのサイト）
上記の表を作成するためのCODEを見る
HTML
<div id="handsontable0"></div>Javascript
// 下記を読みこませておく！
<script src="ht/handsontable.js"></script>
var grid = document.getElementById('handsontable0');
var table0 = new Handsontable(grid, {
data : [
[ "メーカー", "製品名", "ワット数", "金額", "重量", "燃料", "騒音", ],
[ "A-iPower", "SJA2300i", "1800", "62999", "23", "ガソリン", "", ],
[ "SUMEVE", "", "2000", "63750", "19", "ガソリン", "55", ],
[ "アイリスオーヤマ", "IGG-900", "900", "59281", "14.4", "ガソリン", "", ],
[ "アイリスオーヤマ", "IGG-1600", "1600", "86048", "21", "ガソリン", "", ],
[ "ホンダ", "EU9iGB", "900", "104800", "19.5", "カセットボンベ2本", "79～84",],
[ "ホンダ", "EG25i", "2500", "114980", "29.9", "ガソリン", "", ],
[ "ホンダ", "EU18i", "1800", "146000", "21.1", "ガソリン", "90", ],
[ "ホンダ", "EU9iT1 JN1", "900", "92864", "13", "ガソリン", "86", ],
[ "ヤマハ", "EF9HiS", "900", "87991", "12.7", "ガソリン", "防音型", ],
[ "ヤマハ", "EF16HiS", "1600", "116501", "20", "ガソリン", "防音型", ],
[ "ヤマハ", "EF2000iS", "2000", "181491", "32", "ガソリン", "防音型", ],
[ "ヤマハ", "EF2500i", "2500", "128700", "29", "ガソリン", "65～69", ],
[ "ワキタ", "HPG1600i2", "1600", "93500", "21.5", "ガソリン", "86", ],
[ "ワキタ", "HPG2300iS", "2300", "103939", "30.7", "ガソリン", "82", ],
[ "ワキタ", "HPG3000i", "3000", "103939", "34.5", "ガソリン", "90", ],
[ "工進", "GV-9i", "900", "57958", "14", "ガソリン", "65～58", ],
[ "工進", "GV-16i", "900", "85397", "22", "ガソリン", "65～59", ],
[ "工進", "GV-28i", "900", "139799", "38", "ガソリン", "68～65", ],
],
rowHeaders: true, //行のヘッダーを表示
colHeaders: true, //列のヘッダーを表示
columnSorting: true, // 列のソートを可能にする
contextMenu: { // cell上で右クリックしたときにメニューを表示
items: {
row_above: {
name: '上に行を挿入'
},
row_below: {
name: '下に行を挿入'
},
col_left: {
name: '左に空列を挿入'
},
col_right: {
name: '右に空列を挿入'
},
remove_row: {
name: '選択している行を削除'
},
remove_col: {
name: '選択している列を削除'
},
}
},
minSpareRows:1, // 最後に空白行を追加する数
licenseKey: 'non-commercial-and-evaluation' // 大事なライセンスキーをここに置く
});
CSS
<link href="ht/handsontable.full.css" rel="stylesheet" type="text/css">
HandsonTableを使って表を操作する
jquery.handsontable.jsを使って表のデータを書き換える。
JSONが正しいFORMATになっているかチェック&整形サイト
JSONのファイルには配列の最後のデータには「,」を絶対につけないこと。またJSONの最後に「;」も絶対につけない！！
CODE
HTML
<div id="handsontable1"></div>
Javascript
// 下記を読みこませておく！
<script src="js/jquery.handsontable.js"></script>
var grid = document.getElementById('handsontable1');
var table = new Handsontable(grid, {
data: [
['a', 'b', 'c', 'd'],
['e', 'f', 'g', 'h'],
['i', 'j', 'k', 'l'],
['m', 'n', 'o', 'p'],
//連想配列の場合は下記の様に{}です！！
//{maker:"メーカー", productName:"製品名", watt:1800, price:0, weight:10, nenryou:"ガソリン", noise: 0}
],
rowHeaders: true,
colHeaders: true,
columnSorting: true, // 列のsortを可能にする
contextMenu: { // 右クリック
items: {
row_above: {
name: '上に行を挿入'
},
row_below: {
name: '下に行を挿入'
},
col_left: {
name: '左に空列を挿入'
},
col_right: {
name: '右に空列を挿入'
},
remove_row: {
name: '選択している行を削除'
},
remove_col: {
name: '選択している列を削除'
},
}
},
minSpareRows:1, // 空白行追加数
licenseKey: 'non-commercial-and-evaluation'
});
hatsudenki.json=下記↓
各行の最後のデータの後に「,」を付けない。また全体の最後にも「;」を付けない
[
[ "メーカー", "製品名", "ワット数", "金額", "重量", "燃料", "騒音" ],
[ "A-iPower", "SJA2300i", "1800", "62999", "23", "ガソリン", "" ],
[ "SUMEVE", "", "2000", "63750", "19", "ガソリン", "55" ],
[ "アイリスオーヤマ", "IGG-900", "900", "59281", "14.4", "ガソリン", "" ],
[ "アイリスオーヤマ", "IGG-1600", "1600", "86048", "21", "ガソリン", "" ],
[ "ホンダ", "EU9iGB", "900", "104800", "19.5", "カセットボンベ2本", "79～84" ],
[ "ホンダ", "EG25i", "2500", "114980", "29.9", "ガソリン", "" ],
[ "ホンダ", "EU18i", "1800", "146000", "21.1", "ガソリン", "90" ],
[ "ホンダ", "EU9iT1 JN1", "900", "92864", "13", "ガソリン", "86" ],
[ "ヤマハ", "EF9HiS", "900", "87991", "12.7", "ガソリン", "防音型" ],
[ "ヤマハ", "EF16HiS", "1600", "116501", "20", "ガソリン", "防音型" ],
[ "ヤマハ", "EF2000iS", "2000", "181491", "32", "ガソリン", "防音型" ],
[ "ヤマハ", "EF2500i", "2500", "128700", "29", "ガソリン", "65～69" ],
[ "ワキタ", "HPG1600i2", "1600", "93500", "21.5", "ガソリン", "86" ],
[ "ワキタ", "HPG2300iS", "2300", "103939", "30.7", "ガソリン", "82" ],
[ "ワキタ", "HPG3000i", "3000", "103939", "34.5", "ガソリン", "90" ],
[ "工進", "GV-9i", "900", "57958", "14", "ガソリン", "65～58" ],
[ "工進", "GV-16i", "900", "85397", "22", "ガソリン", "65～59" ],
[ "工進", "GV-28i", "900", "139799", "38", "ガソリン", "68～65" ]
]
$(function() {
$.getJSON("json/hatsudenki2.json" , function(data) {
//console.table(data);
$("#handsontable1").handsontable("loadData", data);
});
});
</script>
CSS
<link rel="stylesheet" media="screen" href="css/jquery.handsontable.css">