月間1万PV達成目前! 収益は毎日発生中! ブログランキング上位! 記事は毎日更新中! ギランバレー症候群に関する情報を集めています

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

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

 

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

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

 

 

Handsontableとは

Handsontable

Handsontableは冒頭でもお話しした通り、Excelライクな画面を構築するためのライブラリです。単純にHTMLで画面を作れば良いわけですが、手軽にエクセル風な画面を構築できるのがメリットになります。

例えば、「テーブルのソート」や「セルのコピー&ペースト」なども標準で備わっている機能になります。ただし、僕が使ってみた感想ですが、やはり高度な画面を作るとなると融通が利かないところもあります。でも、簡単なマスタ系の画面を作るのは手軽にできるので検討してみても良いかと思います。

 

 

Handsontableの使い方

フォルダ構成や簡単な使い方はこちらに載っていますので参考にしてみてください。ここでは、僕が実装する際に困った事を書いていきますので。

■Handsontableの使い方

URL:「https://qiita.com/opengl-8080/items/ac19deec388c357cd498」

 

 

Handsontableの高度な使い方

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

ちなみに、ここに書いてある内容は僕が現場で実装したものを書いています。

 

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

セルが編集された場合に、特定のセルに値を設定したい場合などがあります。そういった場合には有効です。

※「beforeChange」を使用します。

 

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

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

 

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

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

 

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

セルの背景色を好きな色に変更したい場合は、「renderer」を使います。

 

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

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

 

3.ヘッダを結合する

ヘッダを一部結合したい場合、例えばExcelのセル結合のような形を再現したい場合に有効です。
※セレクタを使用しているため、JavaScriptを読み込む必要があります。

 

ヘッダを結合する

 

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

 

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

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

 

ヘッダの色を変更する

 

 

まとめ

ライブラリというのは便利な反面、情報が少ないという欠点もあります。Javaなんかであれば情報は腐るほど載っていますが、ライブラリだとそういうわけにはいきません。

だからこそ、僕が知っているネットに載っていない情報はどんどん共有していきたいと思います。

Travelerを知らないの?