仮想通貨ブログに専念するため、たまーに更新します!仮想通貨ブログはこちら!

Handsontableデモ!使い方を現役エンジニアが解説!

  • URLをコピーしました!
悩んでいる男の子

Handsontableを使ってみたいんだけど、使い方が分からないから教えてもらえないかな?
具体的なソースコードもあると嬉しいな。

こんな疑問にお答えします。

  • 本記事の内容
  • Handsontableとは?
  • Handsontableの使い方
  • Handsontableの高度な使い方
  • 具体的なソースコード
  • 本記事の執筆者
いずみん(@izumin_0401)

今回は、Handsontableの使い方を解説します。

いずみん

実際に業務で使っていたので参考になるかと思います!

プログラミングを学びたい方必見!

オンライン特化のプログラミングスクールなら「」が超おススメ!

副業としてプログラミングを学びたい方にもおすすめのスクールです!

  • 初心者が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の情報は少ないので色々と苦戦しました。。

ではまた!

  • 自由な生き方がしたいなら!

自由な生き方をするためには、稼ぐスキルを身に付けなければなりません。

当サイト「リバトレ」では稼ぐスキルに関する情報を日々発信しているので、興味のあるものから見て頂ければ嬉しいです。

稼ぐスキルを身に付けよう!!
SNSもフォローしてね!

この記事が気に入ったら
いいね または フォローしてね!

シェアするんやで!
  • URLをコピーしました!
  • URLをコピーしました!
目次