SpreadJS製品ヘルプ
テーブルのサイズ変更
SpreadJS > 開発者の手引き > 機能 > データ視覚化とオブジェクトの管理 > テーブル > テーブルのサイズ変更

Spread.Sheetsでは、Excelと同様にテーブルのサイズを変更することができます。

サイズ変更インジケータ:showResizeHandleメソッドがtrueに設定されている場合、サイズ変更インジケータがテーブルの右下隅に表示されます。

サイズ変更ハンドラ:サイズ変更インジケータの上にマウスを移動すると、サイズ変更ハンドラが表示されます。

サイズ変更ハンドルを表示するかどうかを示す値を取得または設定するには、showResizeHandle() メソッドを使用します。

showResizeHandleメソッドがtrueに設定されている場合、テーブルの右下隅に小さなサイズ変更インジケータが表示されます。このインジケータを使用して、テーブルのサイズを変更できます。インジケータを選択し、右方向にドラッグすると列が追加され、下方向にドラッグすると行が追加されます。

 

テーブルのサイズ変更

ユーザーが、テーブルを要件に応じて、より小さい範囲だけではなく、より大きい範囲にもサイズ変更できます。

ヘッダ行と合計行を含むテーブルのサイズ変更

ヘッダ行と合計行を含むテーブルのサイズを変更することもできます。

サイズ変更ハンドラを右方向に移動してヘッダ行と合計行を含むテーブルのサイズを変更すると、新しい列が新規名で追加され、追加されたセルに同じスタイルが適用されます。

サイズ変更ハンドラを下方向に移動する場合、変更されたセル範囲にヘッダ行と合計行が含まれます。左方向の場合は、テーブルデータはそのまま保持され、列からスタイルが削除されます。上方向の場合、行数も変更されます(例:変更された範囲の行数 + 1)。

数式を含むテーブルのサイズ変更

テーブルのサイズを変更しても、選択した範囲はそのまま保持されます。スタイルとデータを含むテーブルのサイズを変更した後、数式はそのまま保持され、新しいセル範囲にも自動的に適用されます。テーブルの範囲を参照する式は、テーブルのサイズによって更新されます。

テーブルのサイズを変更する際、下記の点に注意する必要があります。

注:以下は、テーブルのサイズ変更に対する制限事項となります。

コードの使用

次のサンプルコードは、サイズ変更ハンドラを有効にして、テーブルのサイズを変更する方法を示します。

JavaScript
コードのコピー
// Spreadを初期化します。
var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), {
  sheetCount: 1
});
// シートオブジェクトを取得します。
var activeSheet = spread.getActiveSheet();
// テーブルを追加します。
var table = activeSheet.tables.add("table1", 1, 1, 4, 4, GC.Spread.Sheets.Tables.TableThemes.light1);
// showResizeHandleメソッドをtrueに設定して、テーブルのサイズ変更ハンドラを有効にします。
table.showResizeHandle(true);
activeSheet.getCell(1, 1).text("名");
activeSheet.getCell(1, 2).text("姓");
activeSheet.getCell(1, 3).text("得点");
activeSheet.getCell(1, 4).text("名称");
activeSheet.getCell(2, 1).text("Alexa");
activeSheet.getCell(2, 2).text("Wilder");
activeSheet.getCell(2, 3).text("90");
activeSheet.getCell(2, 4).text("Web 開発者");
activeSheet.getCell(3, 1).text("Victor");
activeSheet.getCell(3, 2).text("Wooten");
activeSheet.getCell(3, 3).text("70");
activeSheet.getCell(3, 4).text(".NET 開発者");
activeSheet.getCell(4, 1).text("Ifeoma");
activeSheet.getCell(4, 2).text("Mays");
activeSheet.getCell(4, 3).text("85");
activeSheet.getCell(4, 4).text("販売マネージャー");
for (var i = 0; i < 3; i++)
  activeSheet.setColumnWidth(i, 90.0, GC.Spread.Sheets.SheetArea.viewport);
activeSheet.setColumnWidth(4, 120);