今日の人気記事

まだデータがありません。

ExcelのようにTableが編集できちゃう「Handsontable」

当ページのリンクには広告が含まれています。

スポンサーリンク

ExcelのようにTableが編集できちゃうjQueryプラグイン「Handsontable」を紹介します。

jQueryプラグイン「Handsontable」

jQueryプラグイン「Handsontable」は、HTMLのTableをページ遷移することなく動的に編集できるようにするプラグインです。

そう、まるでExcelのように。

これがなかなか使い勝手がいいんです。指定した要素が編集できちゃう「trocar.js」というプラグインもあるので合わせてご覧ください。

スポンサーリンク

デモでTableを編集してみてください。セルをダブルクリックするとセル内のテキストを編集でき、グリッドの右下ポインタをドラッグするとコピーまでできる優れもの。すげー。

「Handsontable」のデモ

ソース(HTML + jQuery)

<!DOCTYPE html>
<html>
<head>
<meta charset='utf-8'>
<meta name="description" content="Handsontableのデモでーす。">
<title>Handsontable - jQuery Plugin Demo</title>
<script src="js/jquery.min.js"></script>
<script src="js/jquery.handsontable.full.js"></script>
<link rel="stylesheet" media="screen" href="css/jquery.handsontable.full.css">
</head>
<body>
<h1>Handsontableのデモでーす。</h1>
<div id="example1"></div>
<script>
$("#example1").handsontable({
	startRows: 10,
	startCols: 10,
	rowHeaders: true,
	colHeaders: true,
	minSpareRows: 1,
	fillHandle: true //possible values: true, false, "horizontal", "vertical"
});
var data = [
["バージョン", "コードネーム", "リリース", "パッケージ数"],
[1.1, "buzz", 1996, 474],
[1.2, "rex", 1996, 848],
[1.3, "bo", 1997, 974],
[2.0, "hamm", 1998, 1500],
[2.1, "slink", 1999, 2250],
[2.2, "potato", 2000, 3900],
[3.0, "woody", 2002, 8500],
[3.1, "sarge", 2005, 15400],
[4.0, "etch", 2007, 18000],
[5.0, "lenny", 2009, 28000],
[6.0, "squeeze", 2011, 29000],
[7.0, "wheezy", "2013予定", ""]
];

$("#example1").handsontable("loadData", data);
</script>
</body>
</html>
スポンサーリンク

関連記事(一部広告含む)