Jspreadsheet 使い方メモ４-3（メソッド）

はじめに

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

「Handsontable 使い方メモ４（メソッド）」と比較しながら書いていきます。

※全てのメソッドは網羅していません。

全てのメソッドを確認したい場合は、公式ドキュメントを参照

メソッドの記事は長かったため、分割することにしました。

注意

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

メソッド

セルを指定してメタデータを設定する

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

Pro版なら、1つのセルに異なるセルタイプを設定する機能がある。

updateTableオプションを使用することで、セルごとにスタイルなどの変更は可能。

セルを指定して値を設定する

HandsontableのsetDataAtCellの機能に近いものは、setValueにあたる。

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

let table = new jspreadsheet(grid, {
  minDimensions: [5,5]
});

table.setDataAtCell = function(row, col, value) {
  this.setValue(this.getCellFromCoords(col, row), value);
}

table.setValue('B2', 'hoge');
table.setDataAtCell(2, 1, 'fuga');

• セル名(A1形式)を指定して値を取得する

セルのインデックスを指定して値を取得するには別途関数を作成する必要がある。
Handsontableに合わせて、引数は行,列の順番とした。

table.setDataAtCell = function(row, col, value) {
  this.setValue(this.getCellFromCoords(col, row), value);
}

列名を指定してセルに値を設定する

HandsontableのsetDataAtRowPropがないため、別途関数を作成する必要がある。

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

let table = new jspreadsheet(grid, {
  data: [
    { name: 'hoge' },
    { name: 'fuga' },
    { name: 'piyo' }
  ],
  columns: [
    { title: 'A', name: 'hoge' },
    { title: 'B', name: 'fuga' },
    { title: 'C', name: 'piyo' },
  ]
});

table.propToCol = function(prop) {
  const getIndex = (arr, target) => arr.findIndex(item => item.name === target);
  return getIndex(table.options.columns, prop);
}

table.setDataAtRowProp = function(row, prop, value) {
  const col = this.propToCol(prop);
  this.setDataAtCell(row, col, value);
}

table.setDataAtRowProp(2, 'fuga', 'FUGA');

列の要素を取り除きつつ、新しい要素を追加する

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

行の要素を取り除きつつ、新しい要素を追加する

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

カラムを指定してソートする

Handsontableのsortの機能に近いものは、orderByにあたる。

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

let table = new jspreadsheet(grid, {
  columnSorting: true,
  defaultColWidth: 80,
  data: [
    [1, 2, 3],
    [4, 5, 6],
    [7, 8, 9]
  ]
});

table.orderBy(2, 1);

• 第一引数に、ソートするカラムのインデックスを指定する
• 第二引数に、ソートの向きを指定する（0 が昇順、 1 が降順）

オプションを更新する

HandsontableのupdateSettingsのような機能はない。
optionsプロパティで値を変更することは出来るが、それだけでは画面に反映されない。
textContentを使用することで画面に反映される。

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

let table = new jspreadsheet(grid, {
  colWidths: [200, 50]
});

document.getElementById('button').addEventListener('click', function() {
  ['one', 'two', 'three', 'four'].map((title, column) => {
    table.options.columns[column].title = title;
    table.headers[column].textContent = title;
    table.headers[column].setAttribute('title', title);
  });
});

ヘッダーの変更なら、setHeaderメソッドがあるため、下記のように書き換えできる。

document.getElementById('button').addEventListener('click', function() {
  ['one', 'two', 'three', 'four'].map((title, column) => {
    table.setHeader(column, title);
  });
});

全てのセルのバリデージョンを実行する

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

アンドゥ・リドゥ

Handsontableのundoおよびredoと同じ機能がある。