セルデータ
ReoGrid Web では、高レベルの CellHandle API からパフォーマンス重視の低レベルメソッドまで、さまざまな方法でセルの値を読み書きできます。
Live Demo
CellHandle によるアクセス
worksheet.cell() で CellHandle を取得し、値を操作します。
const ws = grid.worksheet;
// A1 アドレスで指定
ws.cell('A1').value = 'Hello';
// 行・列インデックスで指定(0 始まり)
ws.cell(0, 1).value = 'World';
// 値の読み取り
const val = ws.cell('A1').value; // 'Hello'
チェーンメソッド
setValue() はチェーン可能です。setStyle() や setFormat() と組み合わせて使えます。
ws.cell('A1')
.setValue('売上')
.setStyle({ bold: true, backgroundColor: '#dbeafe' })
.setFormat('#,##0');
低レベル API
パフォーマンスが重要な場合やループ内では、直接メソッドを使います。
// 値の設定
ws.setCellInput(0, 0, 'Hello');
// 値の読み取り
const raw = ws.getCellInput(0, 0); // 入力値(文字列)
const num = ws.getCellNumericValue(0, 0); // 数値として取得
const text = ws.getDisplayText(0, 0); // 表示テキスト(フォーマット適用済み)
// 数値セルかどうか
const isNum = ws.isNumericCell(0, 0);
loadCells() による一括読み込み
loadCells() で複数セルを一度に設定できます。
ws.loadCells([
{ row: 0, column: 0, value: 'Name' },
{ row: 0, column: 1, value: 'Age' },
{ row: 1, column: 0, value: 'Alice' },
{ row: 1, column: 1, value: '30' },
]);
数式の入力
値が = で始まる場合、数式として解釈されます。
ws.cell('C1').value = '=A1+B1';
ws.cell('C2').value = '=SUM(A1:B10)';
数式の詳細は 数式エンジン を参照してください。
パフォーマンスのヒント
大量のセルを更新する場合、描画を一時停止するとパフォーマンスが向上します。
ws.suspendRender();
try {
for (let r = 0; r < 1000; r++) {
ws.setCellInput(r, 0, `Row ${r}`);
ws.setCellInput(r, 1, String(r * 100));
}
} finally {
ws.resumeRender(); // 描画を再開し、まとめて再描画
}
suspendRender() は変更ごとの Canvas 再描画を抑制します。更新が完了したら resumeRender() を呼び出して、すべての変更を一度に再描画します。