悩んでいる男の子Handsontableを使ってみたいんだけど、使い方が分からないから教えてもらえないかな？
具体的なソースコードもあると嬉しいな。
こんな疑問にお答えします。
- 本記事の内容
- Handsontableとは？
- Handsontableの使い方
- Handsontableの高度な使い方
- 具体的なソースコード
- 本記事の執筆者
今回は、Handsontableの使い方を解説します。
いずみん実際に業務で使っていたので参考になるかと思います！
オンライン特化のプログラミングスクールなら「TechAcademy [テックアカデミー]
」が超おススメ！
副業としてプログラミングを学びたい方にもおすすめのスクールです！
- 初心者が9割以上なので挫折せずに学べる！
- 受講者に副業の仕事を1案件以上斡旋！ ※条件あり
- オンライン完結型なので、在宅でもお仕事可！
- プロのメンターがサポートしてくれる！
キャリアカウンセリングやメンター相談が無料でできるのもおすすめポイントです！
Handsontableとは
Handsontableは、Excelライクな画面を構築するためのライブラリです。
手軽にエクセル風な画面を構築できるのがHandsontableの良い点です。
「テーブルのソート」や「セルのコピー＆ペースト」等の機能も標準で備わっています。
マスタ系の簡単な画面を作るのには向いていますが、動きが重いので複雑な画面には不向きです。
Handsontableの使い方
フォルダ構成や簡単な使い方は、下記に記載されているので参考にしてみてください。
Handsontableの高度な使い方
1．セルが編集された場合に、自動で異なるセルに値を設定する
「beforeChange」を使用します。
var data = [
['', 1, '田中'],
['', 2, '鈴木'],
['', 3, '佐藤']
];
var grid = document.getElementById('grid');
new Handsontable(grid, {
data: data,
beforeChange: function(changes, source) {
if(source === 'edit') {
//changes[0]：変更行
//changes[1]：列名
//changes[2]：変更前の値
//changes[3]：変更後の値
//セルが同時に複数変更される場合もあるので、changesは2次元配列となる
data[changes[0][0]][0] = '変更'
}
}
});
「田中」を「いずみん」に編集すると、
1列目の同行に「変更」という文字列が設定されます。
2．セルの背景色を任意の色に変更する
セルの背景色を任意の色に変更したい場合は「renderer」を使用します。
var data = [
['', 1, '田中'],
['', 2, '鈴木'],
['', 3, '佐藤']
];
var grid = document.getElementById('grid');
new Handsontable(grid, {
data: data,
columns: [
{
renderer: function(instance, td, row, col, prop, value, cellProperties) {
Handsontable.renderers.TextRenderer.apply(this, arguments);
td.style.background = '#FFFFC0';
}
},
{},
{}
]
});
1列目の背景色が変更されます。
3．ヘッダを結合する
var data = [
['田中', '鈴木', '佐藤', '木村']
];
var grid = document.getElementById('grid');
var hot = new Handsontable(grid, {
data: data,
colHeaders: true,
afterGetColHeader: function(col, TH) {
// thead内の要素を削除
$('table.htCore thead').empty();
// ヘッダ
var header = '<tr><th rowspan="2" style="vertical-align:middle;">ヘッダ</th><th colspan="3">ヘッダ</th></tr>';
header += '<tr><th>ヘッダ</th><th colspan="2">ヘッダ</th></tr>';
// thead内に要素を追加
$('table.htCore thead').prepend(header);
},
//ヘッダを結合した場合、列全選択は予期せぬ動きをするためイベントを抑止する
beforeOnCellMouseDown: function(event, coords, TD) {
if (coords.row < 0) {
event.stopImmediatePropagation();
}
}
});
ヘッダを作り直すのは良いのですが、Handsontableに横スクロールが付いている場合、任意の値を入力するとヘッダが壊れる事象を確認しています。
ヘッダを強引に作り直すのは、できればやらない方が良いかもしれません。
4．ヘッダの色を変更する
ヘッダの色を変更する場合は、たったの3行cssを追加するだけです。
.handsontable table.htCore div.relative {
background-color: RGB(228, 201, 255);
}
ヘッダの色が変わりましたね。
まとめ
今回は、Handsontableの使い方を解説しました。
Handsontableの情報は少ないので色々と苦戦しました。。
ではまた！
