エクセル風外観
<TABLE>タグで作ったテーブルは、編集する際に１つ１つのセルにアクセスする必要があります。できればエクセルの様に複数セルを範囲選択してまとめてコピーなどしたいものです。有難いことに、オープンソースで「JExcel」というJavascriptのライブラリがあります。
これを使うと、エクセル風のテーブルが簡単に実装できます。テーブル形式フォームにJExcelを適用して、エクセル風外観とする事ができます。
以下が動作例ですが、途中で、２行分を範囲選択してコピー＆ペーストしているシーンが判りますでしょうか。
今回は、この機能を実装し、サーバー上のGoogleスプレッドシートとの間でデータを出し入れできるフォームを作成する方法をご説明します。
目次
「JExcel」を使って「エクセル風外観」のテーブル形式フォームを実装しよう
以下の記事を読むとテーブル形式フォーム※に「JExcel」を導入する方法が分かります。
記事を通して、CDNの形で配信されているJavascriptライブラリの導入方法、JExcelによるエクセル風テーブルの実装方法、エクセル風テーブルとGoogleスプレッドシートとの間でデータを出入力する方法が説明していますので参考にしてください。
- 「エクセル風外観」のご紹介です。JExcelと機能について説明しています。
- JExcelをGASのコードの中に導入する方法について説明しています。コードはテンプレート側にHTMLおよびJavascriptで記述します。
- GoogleスプレッドシートからGetValues関数で取得したセルのデータ配列を、エクセル風テーブルに表示させる方法について説明しています。
- 編集が終わったエクセル風テーブルのデータ配列を取得して、Googleスプレッドシートに引き渡す方法について説明しています。
- GASのコードのご紹介です。スクリプトファイルとテンプレートファイルを記載しています。
