やっほー
Handsontable

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

最初ハドソンテーブルだと思ってました。
ちっきしょーー↑↑

Handsontableとは、Excelライクな画面を構築するためのライブラリです。

ライブラリである以上、できる事とできない事をしっかりと切り分ける必要がありますが、今回は実際にHandsontableでシステム開発をした僕が共有したい事をお話していきます

泉アイコン
この記事を書いた人
(泉浩兵)

当ブログ管理者
・エンジニア
・新プログラミング言語『Zero』開発
・保有資格約20個
・投資好き(日本株・仮想通貨)
・オンラインカジノ好き(ルーレット)
・47都道府県制覇目指し中
⇒Twitter(@izumin_0401)
⇒Instagram(@izumin0401)

Handsontableとは

Handsontable

Handsontableは、Excelライクな画面を構築するためのライブラリです。

単純にHTMLで画面を作れば良いわけですが、手軽にエクセル風な画面を構築できるのがメリットになります。

例えば、「テーブルのソート」や「セルのコピー&ペースト」等の機能も標準で備わっています。

簡単なマスタ系の画面を作るのは手軽にできるのでおススメです。
僕が使ってみた感想ですが、高機能な画面を作るのには向いていないかなと思います。

Handsontableの使い方

フォルダ構成や簡単な使い方はこちらに載っているので参考にしてみてください。

ここでは、僕が実装する際に困った事を書いていきます。

Handsontableの高度な使い方

Handsontableを使うにあたり、「こういった機能を実現したいのにネットに情報がない!」という場合に参考にしてみてください。

1.セルが編集された場合に、自動で異なるセルに値を設定する

セルが編集された場合に特定のセルに値を設定したいことがあります。

そういった場合には「beforeChange」を使用します。

 

セルが編集された場合に、自動で異なるセルに値を設定する

田中」を「いずみん」に編集すると、

 

セルが編集された場合に、自動で異なるセルに値を設定する2

1列目の同行に「変更」という文字列が設定されます。

2.セルの背景色を任意の色に変更する

セルの背景色を任意の色に変更したい場合は「renderer」を使用します。

 

セルの背景色を任意の色に変更する

1列目の背景色が変更されていますね。

3.ヘッダを結合する

ヘッダを一部結合したい場合、例えばExcelのセル結合を再現したい場合に有効です。

セレクタを使用しているため、JavaScriptを読み込む必要があります。
 

ヘッダを結合する

ヘッダを作り直すのは良いのですが、Handsontableに横スクロールがついている場合に任意の値を入力するとヘッダが壊れる事象を確認しています。
ヘッダを強引に作り直すのは、できればやらない方が良いかもしれません。

4.ヘッダの色を変更する

ヘッダの色を変更する場合は、たったの3行cssを追加するだけで変更可能です。

 

ヘッダの色を変更する

まとめ

ライブラリというのは便利な反面、情報が少ないという欠点があります。

Javaなんかであれば情報は腐るほど載っていますが、ライブラリだとそういうわけにはいかないので大変ですね。。

ではまた!

きも男
シルバーーーチャリオッツ!!
Handsontable
フォローしてもらえると泣いて喜びます