はじめに
これは、Jspreadsheet Advent Calendar 2024の21日目の記事となります。
「[Handsontable 使い方メモ３（カラム・セルオプション）](https://qiita.com/opengl-8080/items/ccf5cbccd0ceb0a6bb47」と比較しながら書いていきます。
※全てのオプションは網羅していません。
全てのオプションを確認したい場合は、 公式ドキュメント を参照
カラムオプションの記事は長かったため、分割することにしました。
カラムオプション
typeの指定は下記がある。
'text' | 'number' | 'numeric' | 'percent' | 'notes' | 'dropdown' | 'autocomplete' | 'calendar' | 'color' | 'checkbox' | 'radio' | 'autonumber' | 'progressbar' | 'rating' | 'email' | 'url' | 'image' | 'html' | 'hidden' | 'tags' | 'record'
基本
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [{}],
columns: [
{
type: `text`
}
]
});
- カラムのオプション指定は、
columnsに配列を渡し、列番号に対応する要素にオブジェクトを渡すことで設定する
type：カラムの型を指定する
text：テキスト
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: [
{
type: 'text'
}
]
});
- デフォルトは
text - 文字列入力になる
- 基本、何でも入力可能
- 文字は自動で中央寄せになる(Handsontableは左寄せ)
numeric：数値
フォーマットや国際化（例：金額やカンマ区切り）が必要な場合は、numericを選ぶのが適切です。単純なフォーマットなら、numberを使用する。
但し、formatを指定する必要がある。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: [
{
type: 'numeric',
format: '0'
}
]
});
- 数値の入力のみ可になる
- 数値以外を入力できない
- 文字は自動で中央寄せになる(Pro版は右寄せになる)
- 0のみ入力する場合、別数値を入力してから0を入力する(Pro版は改善済み)
フォーマットする
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: [
{
type: 'number',
format: '#,##0;[Red](#,##0)'
}
]
});
-
formatでフォーマットを指定できる - 公式のフォーマットが使える
0
0.00
0%
0.00%
#,##0
#,##0.00
#,##0;(#,##0)
#,##0;[Red](#,##0)
#,##0.00;(#,##0.00)
#,##0.00;[Red](#,##0.00)
checkbox：チェックボックス
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [
[true],
[false],
[true]
],
columns: [
{
type: 'checkbox'
}
]
});
-
checkboxでチェックボックスになる -
trueでチェックがオンになり、falseでオフになる
オン・オフの値を変更する
HandsontableのcheckedTemplateとuncheckedTemplateのような機能はない。
ラベルを表示する
Handsontableのlabelを表示する機能はない。
dropdown：ドロップダウン
ブラウザ画面が狭い(800px未満)場合では項目選択画面は別画面になるが、広い場合はセル項目内で選択できる。
基本
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: [
{
type: 'dropdown',
source: ['one', 'two', 'three', 'four', 'five'],
multiple: true
}
]
});
ブラウザ画面が広い(800px以上)場合
複数選択
複数選択を可能にするには、multipleにtrueを指定する。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: [
{
type: 'dropdown',
source: ['one', 'two', 'three', 'four', 'five']
}
]
});
ブラウザ画面が広い(800px以上)場合
autocomplete：オートコンプリート
autocomplete は、dropdown と違い、項目を検索できる。
ブラウザ画面が狭い(800px未満)場合では項目選択画面は別画面になるが、広い場合はセル項目内で選択できる。
基本
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: [
{
type: 'autocomplete',
source: ['one', 'two', 'three', 'four', 'five']
}
]
});
ブラウザ画面が狭い(800px未満)場合
-
typeをautocompleteにしてsourceを指定すると、オートコンプリートが表示されるようになる - 候補の検索は、部分一致で行われる
-
sourceで定義した値以外は入力できない
複数選択
複数選択を可能にするには、multipleにtrueを指定する。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: [
{
type: 'autocomplete',
source: ['one', 'two', 'three', 'four', 'five'],
multiple: true
}
]
});
- セミコロン(
delimiterの初期値)区切りで複数の値をセットできる
Handsontableとの違い
下記の機能はない
-
strict：入力できる値を制限する -
allowInvalid：入力できる値を完全に制限する -
sourceに関数を指定する -
filter：候補を絞りこまないようにする
password：パスワード
Handsontableのpasswordのような機能はない。
calendar：日付
Handsontableのdateの機能に近いものはcalendarにあたる。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: [
{
type: 'calendar'
}
]
});
-
calendarにすると日付入力になる - セルの編集を開始すると、カレンダーが表示される
format：日付書式を指定する
HandsontableのdateFormatの機能に近いものはformatにあたる。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: [
{
type: 'calendar',
options: {
format: 'YYYY-MM-DD',
months:['1月', '2月', '3月', '4月', '5月', '6月', '7月', '8月', '9月', '10月', '11月', '12月'],
weekdays:['日曜日','月曜日','火曜日','水曜日','木曜日','金曜日','土曜日'],
weekdays_short: ['日', '月', '火', '水', '木', '金', '土'],
}
}
]
});
-
options.formatで日付書式を指定できる
Handsontableとの違い
下記の機能はない
-
defaultDate：初期値を指定する -
datePickerConfig：細かい動作を調整する