概要
Jspreadsheet CEはタッチ操作にいくつか課題がある。
- 行全体、列全体を除いて、複数のセルを自由に選択できない
- Mobile Safariでコンテキストメニューが表示されず行追加、行削除、コピー、ペーストなどの操作ができない
- 行高さ、列幅を変更できない
この記事ではJspreadsheet CEを拡張してこの問題を解決する。
動作環境
Windows 11 Pro 23H2
Jspreadsheet CE v.5.0.0 / v.4.3.0
Google Chrome バージョン: 135.0.7049.115（Official Build） （64 ビット）
Microsoft Edge 136.0.3240.50 (64 ビット）
Firefox 128.9.0esr（64 ビット）
Mobile Safari 18.2.1
実装
- モバイル版Excelのようにセルの左上、右下にハンドルを表示し、それによってセル範囲を自由に変更可能とする
- セル範囲を選択後にコンテキストメニューを表示する。表示する方法は以下から選択できる。
- セル選択時に直ちにコンテキストメニューを表示する
- セル選択時に小さいボタンを表示し、それを押下することでコンテキストメニューを表示する
- コンテキストメニューではなくアイコンパネルを表示する
- 行ヘッダ、列ヘッダを選択した際にリサイズアイコンを表示し、それをスライドさせることで行高さ、列幅を変更できるようにする
ソースは以下から取得してください。
動作イメージ
セル選択＆コンテキストメニュー表示
＜直ちにコンテキストメニューを表示する場合＞
＜小さいボタンを表示し、押下することでコンテキストメニューを表示する場合＞
＜アイコンパネルを表示する場合＞
列幅変更
行高さ変更
終わりに
バグは随時修正していきます。
(2025/1/25)
- 列幅、行幅を変更できるように機能追加
(2025/1/30)
- Jspreadsheet CEの日本語入力を改善すると一緒に使用できるようにコードを見直し
(2025/5/6)
- v5リリース
(2025/5/11)
- v4にもオプション設定機能をついｋ