スプレッドシート風テーブル表示を行うJavaScriptライブラリ Handsontable 。
機能的にはもっと豪華なものがあるが、シンプルな使い勝手とセルを選択して内容をコピーするとそのままExcelに張り込める形になるあたりが同僚に評価されていることもありちょっとしたブラウザベースのツールでよく使っている。
久々に新規ツールを書くことになって最新版を見に行ったら0.12からjQuery Freeになったとか。
（有力なフレームワークの選択肢が増えたこともあって自分のウォッチしている範囲のライブラリでもjQuery離れが進んでいるのを感じる）
普段の書き方をjQuery Freeなスタイルに置き換えてみる。といっても見かけはほぼ変わらない。
なおhandsontable.full.cssおよびhandsontable.full.jsは同じディレクトリに置いているものとする。
example.html
<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<title>example</title>
<link rel='stylesheet' href='./handsontable.full.css' />
</head>
<body>
<div id='sheet'></div>
<script type='text/javascript' src='./handsontable.full.js'></script>
<script type='text/javascript'>
var data = [
{ id: 1, name: '太郎', age: 20, link: '<a href="http://example.com/member/1">プロフィール</a>' },
{ id: 2, name: '次郎', age: 20, link: '<a href="http://example.com/member/2">プロフィール</a>' },
{ id: 3, name: '三郎', age: 20, link: '<a href="http://example.com/member/3">プロフィール</a>' }
];
var container = document.getElementById('sheet');
var configure = function() {
var columnSettings = [
{ width: 64, head: 'ID', setting: {data: 'id', type: 'numeric', readOnly: true} },
{ width: 80, head: '名前', setting: {data: 'name'} },
{ width: 80, head: '年齢', setting: {data: 'age', type: 'numeric'} },
{ width: 160, head: '', setting: {data: 'link', renderer: 'html', readOnly: true} }
];
return {
data: [],
rowHeight: 24,
colWidths: columnSettings.map(function(e) { return e.width; }),
colHeaders: columnSettings.map(function(e) { return e.head; }),
columns: columnSettings.map(function(e) { return e.setting; }),
contextMenu: true
};
};
var hot = new Handsontable(container, configure());
hot.loadData(data);
</script>
</body>
</html>
Handsontableは公式のサンプルがそろっているほうだと思うのであまり困ることはないと思う。
上記のサンプルでちょっと工夫しているポイントは
- カラムの幅情報や見出しの組み合わせをわかりやすくするために設定情報をいったん配列に格納してmapで取り出している
- configure()が送り返す設定のうちdataは空の配列にしている
- dataの設定はloadData()であとから行う
あたりか。
dataをいったん空にしておきあとからloadData()で流し込んでいるのはデータが増えたときにページネーションをするケースにおいて構造を移行しやすくするための布石。
もちろん初期状態でデータを流し込んでいてもよいのだが、サーバーから逐次データを引っ張ってくるのであればデータ設定部分を一貫した操作で行えるほうがよいと思っている。