handsontableを使ってブラウザでExcel風の動きを再現する
2017.11.20
いきなりですが、登録・更新フォームなどでエクセルの値をそのまま
貼り付けたかったり、逆にブラウザの項目をコピペしてエクセルに貼り付けたり
したいことってありませんか？
今回はそんな時に便利なちょっと面白いjavascriptのライブラリ「handsontable」について
ご紹介していきたいと思います。
まずはhandsontableをダウンロードしましょう！
早速、handsontableを使ってみたいと思いますが、
まずはjQuery(handsontable)のライブラリをダウンロードする
必要があります。
GitHubから
“handsontable.full.js”＆”handsontable.full.css”をダウンロードして下さい。
ダウンロードしたらこれらのjsファイルとcssファイルをhandsontableを
使いたいhtml(php)ファイルで読み込めば使用準備は完了です！
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="./css/jquery.handsontable.full.css">
<script src="./js/jquery.handsontable.full.js"></script>
handosontableを使ってみましょう！
早速、ダウンロードしたhandsontableを使っていきましょう！
まずは簡単にただブラウザにテーブルを表示してみます。
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/jquery.handsontable.full.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.handsontable.full.js"></script>
<script type="text/javascript">
$(document).ready(function () {
var container = document.getElementById('hst');
hstdata = new Handsontable(container, {
data: [
['バナナ', '100'],
['リンゴ', '120'],
['イチゴ', '140']
],
colHeaders: ['名前', '値段(円)'],
colWidths: [100,100],
copyPaste: false,
});
});
</script>
</head>
<body>
<div id="hst"></div>
</body>
</html>
これでとりあえず表示だけできます！
（オプションなどは最低限のものだけです)
handsontableの表示場所にdivタグを使用します。
divタグの要素をjsで取得しhandsontableにその要素を
オブジェクトとして渡すことでdivタグ内にエクセルのような
テーブルを生成します。
表示するだけであれば、上記の記述だけで可能ですが、
handsontableには多種多様なオプションが存在します。
オプションの中で実際に自分が使用したものや、
便利そうだな〜と思ったものについて紹介したいと思います。
type指定-columnsオプション-
こちらのオプションではカラム(列)に対して様々な機能や制限を
設けることが出来ます。
このcolumnsオプションにもかなり種類があるのでいくつか
ピックアップして紹介していきます。
セルに対して型(=type)の指定が可能となります。
hstdata = new Handsontable(container, {
data: [
[false, 'バナナ', '100'],
[false, 'リンゴ', '120'],
[false, 'イチゴ', '140']
],
columns: [
{
type: 'checkbox'
},
{
type: 'text',
readOnly: true
},
{
type: 'numeric'
},
{
type: 'autocomplete',
source: ['東京', '沖縄', '北海道'],
strict: true
},
{
type: 'date',
dateFormat: 'YYYY/MM/DD'
}
],
１列目の”type”は”checkbox”です。
これはその名の通り、その列のセルがチェックボックスとなります。
２列目は”type”が”text”でその下に”readOnly”があります。
“type”はそのままとして、”readOnly”はその列のセルを読み取り専用とします。
編集してほしくない列(カラム)に対して指定すると便利です。
3列目は”type”が”numeric”で数値のみの入力を許可しております。
数値以外の値が入力されるとセルが赤色に変化しますのですぐにわかると思います。
4列目は”type”が”autocomplete”でこちらは
下にある”source”の値を選択して入力の候補として表示させることが出来ます。
(ドロップダウンとは違います!)
また、更に追加して”strict”を追加することによって、
入力値を”source”の値だけに限定することが可能です。
5列目の”type:date”もそのままですね、
これはセルをクリックすると、カレンダーが表示され
指定の日付を入力できます。
日付の形式は、下の”dateFormat”で指定することが出来ます。
上記以外にもhandsontableのカラムオプションには
様々な種類がありますので、ぜひ試してみて下さい。
セル自体(グリッド)の指定
上記以外に列の幅やヘッダーについて指定する
オプションがhandsontableにはあります。
hstdata = new Handsontable(container, {
data: [
[false, 'バナナ', '100'],
[false, 'リンゴ', '120'],
[false, 'イチゴ', '140']
],
columns: [
{
type: 'checkbox'
},
{
type: 'text',
readOnly: true
},
{
type: 'numeric'
},
{
type: 'autocomplete',
source: ['東京', '沖縄', '北海道'],
strict: true
},
{
type: 'date',
dateFormat: 'YYYY/MM/DD'
}
],
colHeaders: ['#', '名前', '値段(円)', '産地', '生産日'],
colWidths: [30,100,100,70,130],
columnSorting: true,
contextMenu: {
items: {
row_above: {
name: '上行を挿入する'
},
row_below: {
name: '下行を挿入する'
}
}
},
copyPaste: true,
fillHandle: false,
wordWrap: false,
trimWhitespace: false
});
});
一つずつ見て行きたいと思います。
まず、”colHeaders”はまとめて列のヘッダー部分(title?)を指定します。
(rowHeadersで縦幅調整が出来ます)
“colWidths”は列の横幅を指定することが出来ます。
(autoColumnSize: trueの指定によって自動調整にすることも可能です)
“columnSorting”はヘッダー部分をクリックすることによって、
列の昇順＆降順切り替えを可能にします。
次の”contextMenu”ですが、これは私も初めて知りました・・。
こちらですがかなり色々なオプションがあるようですが、
簡単にいえばセルを右クリックするした時のメニュー表示に関する
オプションとなります。
“row_above”でクリックしているセルの上に一行追加します。
“row_below”は下に行を追加します。
(この”contextMenu”ですが、”contextMenu: true”で
指定することによって全てのメニューを表示することが出来るようです)
また、この他にも自作のメニューを表示したりなど
色々出来るようです..。(すごいですね)
“copyPaste”はfalseを指定することによって
セルのコピペを不可にします(デフォはtrueです)
“fillHandle”はエクセルでセルの右下の角を選択すると
十字マークが出てドラッグコピーが出来ると思いますが
その動作をhandsontableで再現します
falseにすると非表示となります。(こちらもデフォはtrueです)
“wordWrap”はセル内での改行を制御します。
<falseで折り返ししないとなります)
“trimWhitespace: false”は入力値の前後に空白の
入力を許可します。
(基本的に前後の空白は自動で除去されます)
このグリッドオプションもtype(カラム)オプションと
同様にこの他に様々なオプションがあります。
handsontableを使ってデータベースと連携してみます!
続いて、このhandsontableとphpを使って、
データベースと連携してみたいと思います。
phpでデータベースからデータを取得して、
取得したデータをhandsontableでブラウザに表示します。
初めに今回使用する環境についてと、前準備を
行っていきたいと思います。
環境
- mac OSX
- php 7.0
- handsontable ver0.34.5
- MySQL 5.7
- Xserver
前準備
準備として、取得先のテーブルを作成します。
今回はサンプル用として以下のようにテーブルを作成しました。
テーブルのデータは以下のように準備しました。
とりあえず準備はこれで完了です。
早速、実装していきます。
実装
<!DOCTYPE html>
<head>
<link rel="stylesheet" href="css/jquery.handsontable.full.css">
<link rel="stylesheet" href="css/handsontable_demo.css">
<script src="//ajax.googleapis.com/ajax/libs/jquery/1.11.0/jquery.min.js"></script>
<script src="js/jquery.handsontable.full.js"></script>
<script>
<?php
// 結果を格納する配列
$details = array();
//pdoインスタンス生成
try {
$pdo = new PDO ('mysql:host=mysql2201.xserver.jp;dbname=DB名', 'ユーザ名', 'パスワード');
$con = true;
} catch (PDOException $e) {
$con = false;
echo "データベース接続失敗";
}
if ($con === true) {
//SQL文作成
$sql = "select * from demo_contents";
//SQL実行
$results = $pdo->query($sql);
}
?>
$(function() {
var data = [
<?php
foreach($results as $result) {
echo "['".$result['name']."','".$result['age']."','"
.$result['birthday']."','".$result['password']."'],";
}
?>
];
var container = document.getElementById('hst');
hstdata = new Handsontable(container, {
data: data,
colHeaders: ['名前', '年齢', '生年月日', 'パスワード'],
colWidths: [150,70,130,150],
columnSorting: true,
contextMenu: false,
copyPaste: true,
fillHandle: false,
wordWrap: false,
trimWhitespace: false,
});
});
</script>
</head>
<body>
<div id="hst"></div>
</body>
</html>
一つずつ確認します。
まずphpでデータベースに接続して対象のデータを取得します。
次に取得したデータを”data: […]”に合うように編集して
data変数に格納します(var data = […]の部分です)
そして最後にhandsontableで取得したデータを表示します。
handsontableの”data:…”にはセルに表示するデータを指定できます。
以上でデータの取得〜handsontableでの表示は完了となります。
今回はデータの取得までとなりますが、
handsontableのオプションにはafterChangeオプションというものがあり
取得したデータの表示→セルの変更→変更されたらajaxデータ更新といった
リアルタイムでのデータ更新も可能となります。
今回のまとめ！
handsontableはブラウザ上でテーブルをエクセルのように
いじることを可能とするだけでなくデータベースと連携して
より便利で自由な開発を可能にします。
上記に記述した機能以外にも多くのオプションやメソッドが存在しますので
お時間がありましたらぜひ試してみて下さい。(公式サイト)
ということで、今回はjavascriptのライブラリ「handsontable」の紹介でした。
ご覧いただきありがとうございました！
関連
Webサイト制作サイト制作
Webデザイン
SEO対策コンテンツSEO
SEO基礎SEO対策SEO解析
