--- title: Web上でExcelライクなエディタ「Handsontable」 tags: JavaScript Handsontable author: CS_KOGANE slide: false --- # Web上でExcelライクなエディタ「Handsontable」 ## 概要  「Handsontable」はWebアプリケーション上でExcelライクなエディタを実現するjQueryプラグイン。  WEBページにプラグインに適用するだけでリッチなUIが可能になります。 ## どんなとき使う? Handsontableは例えば下記に挙げたような用途に利用できる。しかし、ユーザ次第でこれ以外にも様々な用途に応用可能です。 - データベース編集 - 設定管理 - データ統合 - 人員管理 - 売上報告 - 財務分析 (引用元: https://docs.handsontable.com/pro/1.13.0/tutorial-introduction.html) ## こんなの 為替の一覧 ![画像01.png](https://qiita-image-store.s3.amazonaws.com/0/190792/a482591a-fc40-f63d-e2ea-d2bb98418e41.png) 日付編集時はコーディングなしでカレンダーが表示可能 ![画像2.png](https://qiita-image-store.s3.amazonaws.com/0/190792/a04ac720-5443-9dff-de4a-bc4a8d4adb65.png) # 導入まで ハンズオンテーブルの導入には1.プラグインの入手、2.HTMLにデータの定義と表の表示をコーディング、3.ブラウザから表示となります。 ## 準備するもの 入手方法 Handsontable公式ホームページ https://handsontable.com/ 無償版 https://github.com/handsontable マニュアル(英語) 0.34.0版 https://docs.handsontable.com/0.34.0/tutorial-introduction.html?_ga=2.174165218.1147910324.1503039446-133538248.1503039446 GitHubより入手できる以下の資産を使用する handsontable.full.min.js handsontable.full.min.css ## 実装  ```
/* 表示データ定義 */ ``` ## TIPS ・表示内容が見切れないように折り返して表示させる場合、行の高さがデータごとに変わる。  このとき、表の列が多く横スクロールが必要となる場合、表示している内容で行の高さが自動で変わり、  どのデータにフォーカスが当たっているのか見分けがつかなくなってしまう。  以下の設定を行うことで、行の高さが自動で変わる事象を解消することができる。  autoRowSize: true ・バリデーションを組み込み、特定の条件を満たす値のみした許可しないようにすることができる。  また、設定によって、条件を満たさない場合の値が入力された場合の挙動を変えることが可能。  allowInvalid: true → 条件を満たさない値を入力した場合、セル色が赤くなる  allowInvalid: false → 条件を満たす値が入力するまで、フォーカスが外れない ・Excelのように、行の固定、列の固定を行うことができる  そのため、キーととなる情報の列は固定で常に表示した状態にすることができる。 ・Chormeで「てすと」と入力しようとすると、「tえすと」となってしまうバグがある。  ※IEでは、問題なく「てすと」と入力することができる。 ・値が変更されたとき、フォーカスが移動されたときなどのさまざまなイベントが発生した際に  処理を組み込むことができる。  処理を作りこむことで、Googleスプレッドシートのように同時編集を行えるような画面を  作成することも可能。