これは、Jspreadsheet Advent Calendar 2024の22日目の記事となります。
「Handsontable 使い方メモ４（メソッド）」と比較しながら書いていきます。
※全てのメソッドは網羅していません。
全てのメソッドを確認したい場合は、 公式ドキュメント を参照
メソッドの記事は長かったため、分割することにしました。
メソッド
行・列を挿入・削除する
Handsontableのalterのように処理の種類を指定する機能はありません。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [
[1, 2, 3],
[1, 2, 3],
[1, 2, 3]
]
});
table.insertRow(1, 0);
let prop = [{title:'Available', width:80, type:'checkbox'}];
table.insertColumn(1, 2, 1, prop);
- 第一引数に、挿入する行（列）数を指定する
- 第二引数に、処理対象の行・列を指定するインデックスを渡す
- 第三引数に、0:before、1:after。デフォルトは 0
- 第四引数に、オブジェクト。insertColumnのみ
行・列を削除する
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [
[1, 2, 3],
[1, 2, 3],
[1, 2, 3]
]
});
table.deleteRow(1, 0);
table.deleteColumn(1, 1);
- 第一引数に、削除する行（列）数を指定する
- 第二引数に、処理対象の行・列を指定するインデックスを渡す
グリッドをクリアする
Handsontableのclearのような機能はありませんが、初期化する方法はあります。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [
[1, 2, 3],
[1, 2, 3],
[1, 2, 3]
]
});
table.setData([[]]);
- グリッドの中身を全てクリアするが、行も消えてしまう
// 行数と列数を指定してクリアする
table.setData(Array.from({ length: 3 }, () => Array(3).fill('')));
列・行数を取得する
HandsontableのcountColsの機能に近いものは、table.headers.lengthにあたる。
HandsontableのcountRowsの機能に近いものは、table.options.data.lengthにあたる。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [
[1, 2],
[1, 2],
[1, 2]
]
});
let cols = table.headers.length;
let rows = table.options.data.length;
console.log(`cols=${cols}, rows=${rows}`);
-
table.headers.lengthで列数を、table.options.data.lengthで行数を取得できる
空の行・列数を習得する
HandsontableのcountEmptyCols,countEmptyRowsのような機能はない。
色々な条件の行・列数を取得する
Handsontableのcount**Cols,count**Rowsのような機能はない。
セルの選択状態を解除する
HandsontableのdeselectCellの機能に近いものは、resetSelectionにあたる。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
minDimensions: [5,5]
});
table.updateSelectionFromCoords(2,2,3,3)
setTimeout(function() {
table.resetSelection()
}, 2000);
- 表示後にセル選択も、約2秒後に
resetSelection()が実行されて選択が解除される
グリッドを削除する
Handsontableのdestroyと同じ機能である。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
minDimensions: [5,5]
});
table.destroy();
- グリッドが完全に削除される
- グリッドの対象としていたタグ（#grid）は残る
セルの情報を取得する
HandsontableのgetCellMetaの機能に近いものは、getCellやgetCellFromCoordsにあたる。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [
{ name: '佐藤 一郎', age: 25 },
{ name: '鈴木 二郎', age: 11 },
{ name: '田中 三郎', age: 21 }
],
columns: [
{ title: '名前', name: 'name', type: 'text', align: 'left', width: 100 },
{ title: '年齢', name: 'age', type: 'numeric' },
]
});
console.log(table.getCell('A1'));
console.log(table.getCellFromCoords(1,0));
- Handsontableと違い、セルの情報(DOMオブジェクト)を取得する
-
getCellはA1形式でセットする -
getCellFromCoordsは位置(x,y)でセットする
ヘッダー名を取得する
HandsontableのgetColHeaderの機能に近いものは、getHeaderやgetHeadersにあたる。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
data: [[]],
columns: ['one', 'two', 'three', 'four', 'five'].map(title => ({ title }))
});
console.log(table.getHeaders());
console.log(table.getHeader(2));
one, two, three, four, five
three
- 全ての列名は、
getHeadersを使用する、Handsontableと違い配列ではない - 列のインデックスを指定した場合、その列の名前が返される
- Handsontableと違い、範囲外のインデックスは例外エラーとなる
列・列の幅・高さを取得する
HandsontableのgetColWidthの機能に近いものは、getColWidthにあたる。
HandsontableのgetRowHeightの機能に近いものは、getHeightにあたる。
let grid = document.getElementById('grid');
let table = new jspreadsheet(grid, {
minDimensions: [5,5],
colWidths: [100, 120]
});
table.setHeight(0, 20);
table.setHeight(1, 80);
console.log(table.getWidth(0) + ', ' + table.getHeight(0));
console.log(table.getWidth(1) + ', ' + table.getHeight(1));
指定した要素が存在する座標を取得する
HandsontableのgetCoordsのような機能はない。