著作権についてお問い合わせHandsontableデモ!使い方を現役エンジニアが解説します!2019.02.12JavaScriptHOMEITJavaScriptHandsontableデモ!使い方を現役エンジニアが解説します!AdvertisementHandsontableとはExcelライクな画面を構築するためのライブラリです。ライブラリである以上、できる事とできない事をしっかりと切り分ける必要がありますが、ここでは実際にHandsontableでシステム開発をした僕が共有したい事を書いていきます。まとめHandsontableとはHandsontableは冒頭でもお話しした通り、Excelライクな画面を構築するためのライブラリです。単純にHTMLで画面を作れば良いわけですが、手軽にエクセル風な画面を構築できるのがメリットになります。「テーブルのソート」や「セルのコピー&ペースト」なども標準で備わっている機能になります。僕が使ってみた感想ですが、やはり高度な画面を作るとなると融通が利かないところもあります。簡単なマスタ系の画面を作るのは手軽にできるので検討してみても良いかと思います。Handsontableの使い方フォルダ構成や簡単な使い方はこちらに載っていますので参考にしてみてください。ここでは、僕が実装する際に困った事を書いていきますので。■Handsontableの使い方URL:「https://qiita.com/opengl-8080/items/ac19deec388c357cd498」Handsontableの高度な使い方Handsontableを使うにあたり、「こういった機能を実現したいのにネットに情報がない!」という場合に参考にしてみてください。ちなみに、ここに書いてある内容は僕が現場で実装したものを書いています。1.セルが編集された場合に、自動で異なるセルに値を設定するセルが編集された場合に、特定のセルに値を設定したい場合などがあります。いった場合には有効です。※「beforeChange」を使用します。'変更'}}});「田中」を「いずみん」に編集すると、1列目の同行に「変更」という文字列が設定されます。2.セルの背景色を任意の色に変更するセルの背景色を好きな色に変更したい場合は、「renderer」を使います。'#FFFFC0';}},{},{}]});1列目の背景色が変更されていますね。3.ヘッダを結合するヘッダを一部結合したい場合、例えばExcelのセル結合のような形を再現したい場合に有効です。※セレクタを使用しているため、JavaScriptを読み込む必要があります。{event.stopImmediatePropagation();}}});ヘッダを作り直すのは良いのですが、Handsontableに横スクロールがついている場合に任意の値を入力するとヘッダが壊れる事象を確認しています。ヘッダを強引に作り直すのは、できればやらない方が良いかもしれません。4.ヘッダの色を変更するヘッダの色を変更する場合は、たったの3行cssを追加するだけで変更可能です。255);}まとめライブラリというのは便利な反面、情報が少ないという欠点もあります。Javaなんかであれば情報は腐るほど載っていますが、ライブラリだとそういうわけにはいきません。僕が知っているネットに載っていない情報はどんどん共有していきたいと思います。