Jspreadsheet 使い方メモ3（カラム・セルオプション）

はじめに

これは、Jspreadsheet Advent Calendar 2024の21日目の記事となります。

「Handsontable 使い方メモ３（カラム・セルオプション）」と比較しながら書いていきます。

※全てのオプションは網羅していません。

全てのオプションを確認したい場合は、 公式ドキュメント を参照

注意

現時点(2025/03/09)では、Jspreadsheet CE Version 4 を対象としています。
Version 5 のリリースにより見直す予定です。

カラムオプション

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：細かい動作を調整する

type：html をそのまま出力する

Handsontableのrenderer: 'html'の機能に近いものはtype： 'html'にあたる。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [
    ['<u>underline</u>'],
    ['<a href="http://google.co.jp/">google</a>'],
    ['<button onclick="alert(\'hello\')">click</button>']
  ],
  columns: [
    { type: 'html' }
  ],
  defaultColWidth: 100
});

allowEmpty：空入力を許可する

HandsontableのallowEmptyのような機能はない。

readonly：読み取り専用

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [
    ['hoge', 'fuga']
  ],
  columns: [
    { readOnly: true },
    { }
  ]
});

• readOnlyをtrue にすると、そのカラムは読み取り専用になる

allowInvalid：不正な値の入力可否を制御する

HandsontableのallowInvalidのような機能はない。

validator：入力値を制限する

Handsontableのvalidatorのような機能はない。

className：CSSクラスを設定する

HandsontableのclassNameのような機能はない。

近いものとして、styleを使用してCSSをセットすることはできる。

let grid = document.getElementById('grid');

let table = new jspreadsheet(grid, {
  data: [
    ['hoge', 'fuga']
  ],
  style: {
    'A1': 'background-color: #ccffff; font-weight: bold',
    'B1': 'color: red'
  }
});

• CE版は'A:A'という指定をしても反映されなかったが、Pro版は反映される

セルの編集をドロップダウンにする

Handsontableのeditor: 'select'に近いものとしては、type: 'dropdown'がある。

ドロップダウン

セルを指定してオプションを設定する

Handsontableのcellのような機能はない。

列のタイプをプログラムで変更する方法はありそうです。

• How to change the column type programatically..? #65
• How to change a cell type programatically ? #1016