文書の表示以前のリビジョンバックリンク文書の先頭へ この文書は読取専用です。文書のソースを閲覧することは可能ですが、変更はできません。もし変更したい場合は管理者に連絡してください。 ====== HandsOnTable - スプレッドシート機能とルックアンドフィールを備えたデータグリッド ====== 本家: [[https://handsontable.com/|Handsontable is a JavaScript data grid that looks and feels like a spreadsheet | Available for React, Angular and Vue]]\\ ソースコード: [[git>handsontable/handsontable|GitHub - handsontable/handsontable: JavaScript data grid with a spreadsheet look & feel. Works for React, Angular, and Vue. Supported by the Handsontable team ⚡]]\\ ===== インストール ===== <wrap em>jsDelivr CDN を利用する場合はインストールの必要はありません🥰</wrap>\\ github より最新ソースを取得する。\\ <WRAP prewrap 100%> <code> $ git clone --depth 1 https://github.com/handsontable/handsontable.git </code> </WRAP> <WRAP prewrap 100% #result> <code> Cloning into 'handsontable'... remote: Enumerating objects: 1721, done. remote: Counting objects: 100% (1721/1721), done. remote: Compressing objects: 100% (1412/1412), done. remote: Total 1721 (delta 382), reused 1006 (delta 249), pack-reused 0 Receiving objects: 100% (1721/1721), 5.52 MiB | 6.22 MiB/s, done. Resolving deltas: 100% (382/382), done. </code> </WRAP> handsontable/dist ディレクトリに完全な配布物が含まれている。\\ <WRAP prewrap 100%> <code> $ cd handsontable/dist/ $ ll </code> </WRAP> <WRAP prewrap 100% #result> <code> 合計 13220 -rw-r--r-- 1 tomoyan tomoyan 2509 5月 7 06:56 README.md drwxr-xr-x 1 tomoyan tomoyan 58 5月 7 06:56 dompurify -rw-r--r-- 1 tomoyan tomoyan 41087 5月 7 06:56 handsontable.css -rw-r--r-- 1 tomoyan tomoyan 51112 5月 7 06:56 handsontable.css.map -rw-r--r-- 1 tomoyan tomoyan 45611 5月 7 06:56 handsontable.full.css -rw-r--r-- 1 tomoyan tomoyan 3820842 5月 7 06:56 handsontable.full.js -rw-r--r-- 1 tomoyan tomoyan 35509 5月 7 06:56 handsontable.full.min.css -rw-r--r-- 1 tomoyan tomoyan 1298418 5月 7 06:56 handsontable.full.min.js -rw-r--r-- 1 tomoyan tomoyan 3088115 5月 7 06:56 handsontable.js -rw-r--r-- 1 tomoyan tomoyan 4118809 5月 7 06:56 handsontable.js.map -rw-r--r-- 1 tomoyan tomoyan 32117 5月 7 06:56 handsontable.min.css -rw-r--r-- 1 tomoyan tomoyan 985424 5月 7 06:56 handsontable.min.js drwxr-xr-x 1 tomoyan tomoyan 48 5月 7 06:56 hot-formula-parser drwxr-xr-x 1 tomoyan tomoyan 672 5月 7 06:56 languages drwxr-xr-x 1 tomoyan tomoyan 44 5月 7 06:56 moment drwxr-xr-x 1 tomoyan tomoyan 116 5月 7 06:56 numbro drwxr-xr-x 1 tomoyan tomoyan 56 5月 7 06:56 pikaday </code> </WRAP> 詳しくは、[[https://github.com/handsontable/handsontable/tree/master/dist|README.md]] を参照のこと。\\ ===== HandsOnTable の使い方 ===== <html> <iframe width="100%" height="360" src="//jsfiddle.net/tomoyan596/af54jpzy/39/embedded/result,html,js,resources/dark/" allowfullscreen="allowfullscreen" allowpaymentrequest frameborder="0"></iframe> </html> ==== インスタンス生成時に最低限指定しなければならない項目 ==== <WRAP prewrap 100% mincode> <code html> <div id="hoTable"> </div> </code> <code javascript> 'use strict'; const hoTable = document.getElementById('hoTable'); new Handsontable(hoTable, { data: [ ['佐藤', 10], ['斎藤', 20], ['シュガーはホントに🐎の💩', 100] ], width: 300, height: 80, licenseKey: 'non-commercial-and-evaluation' }); </code> </WRAP> ご参考: [[http://www.fstcon.jp/?p=34723|サトウ、サイトウ、馬のクソ | ファーストコンサルティング株式会社]]\\ ===== jsDelivr CDN を利用する ===== <WRAP prewrap 100% mincode> <code> https://cdn.jsdelivr.net/npm/package[@version]/dist/file package=handsontable [version=9.0.0] file=handsontable.full.* </code> <code html> <script src="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.js"></script> <link href="https://cdn.jsdelivr.net/npm/handsontable/dist/handsontable.full.min.css" rel="stylesheet"> </code> </WRAP> ===== 参考文献 ===== [[qita>opengl-8080/items/ac19deec388c357cd498|Handsontable 使い方メモ1(基本) - Qiita]]\\ [[qita>yaju/items/c0307fa9ea69ad02c189|【Handsontable】導入と設定 - Qiita]]\\ [[https://handsontable.com/blog/articles/2016/3/a-complete-guide-to-changing-size-of-handsontable|A Complete Guide to Changing the Size of Handsontable]]\\ javascript/handsontable.txt 最終更新: 2021/10/10 04:49by ともやん