SpreadJS製品ヘルプ
範囲グループ
SpreadJS > 開発者の手引き > 機能 > ユーザーインタフェースの管理 > 範囲グループ

ヘッダに基づき、行または列がアウトラインとしてグループ化されるように、スプレッドシートの表示を設定できます。この機能を使用すると、ヘッダの外側にアウトライン領域が作成されます。アウトラインでは、複数レベルの行または列を展開または折りたたむことができます。範囲グループを作成するには、groupメソッドを使用します。

また、異なるCSSクラスを使用して範囲グループの外観を変更することもできます。詳細については、「範囲グループのカスタマイズ」を参照してください。

列グループ領域は列ヘッダの上部に、行グループ領域は行ヘッダの左側に作成されます。

レベルボタンと番号で、レベル数が示されます。レベルボタン(アイコン)を使用すると、グループを展開または折りたたむことができます。

グループの表示/非表示を指定するには、showRowOutlineおよびshowColumnOutlineメソッドを使用します。 範囲グループを削除するには、unGroupメソッドを使用します。

コードの使用

次のサンプルコードは、列グループおよび行グループを作成します。

JavaScript
コードのコピー
activeSheet.setRowCount(34);
activeSheet.setValue(0,0,"Western");
activeSheet.setValue(0,1,"Western");
activeSheet.setValue(0,2,"Western");
activeSheet.setValue(1,0,"A");
activeSheet.setValue(1,1,"B");
activeSheet.setValue(1,2,"C");
activeSheet.setValue(2,0,"A");
activeSheet.setValue(2,1,"B");
activeSheet.setValue(2,2,"C");
activeSheet.rowOutlines.group(0,2);
activeSheet.columnOutlines.group(0,1);
//activeSheet.rowOutlines.expand(0,false);
//activeSheet.columnOutlines.expand(0,false);
spread.invalidateLayout();
spread.repaint();

コードの使用

次のサンプルコードは、グループの方向を指定します。

JavaScript
コードのコピー
activeSheet.rowOutlines.group(3,2);
activeSheet.columnOutlines.group(4,1);
activeSheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.Backward);
activeSheet.columnOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.Forward);
spread.invalidateLayout();
spread.repaint();

コードの使用

次のサンプルコードは、アクションを指定して、executeメソッドを使用します。

JavaScript
コードのコピー
var spread = new GC.Spread.Sheets.Workbook($("#ss")[0]);
 var activeSheet = spread.getActiveSheet();
 spread.commandManager().execute({cmd: "outlineRow", sheetName: activeSheet.name(), index: 4, count: 3});

コードの使用

次のサンプルコードは、グループを特定して折りたたみます。

JavaScript
コードのコピー
activeSheet.rowOutlines.group(0,5);
var rgi = activeSheet.rowOutlines.find(1, 0);
rgi.state(GC.Spread.Sheets.Outlines.OutlineState.Collapsed);
spread.invalidateLayout();
spread.repaint();

コードの使用

次のサンプルコードは、showRowRangeGroupおよびshowColumnRangeGroupメソッドを設定します。

JavaScript
コードのコピー
activeSheet.showRowOutline(true);
activeSheet.rowOutlines.group(0, 2);
activeSheet.showColumnOutline(true);
activeSheet.columnOutlines.group(0, 2);
//activeSheet.rowOutlines.ungroup(0, 2);
//activeSheet.columnOutlines.ungroup(0, 2);
spread.invalidateLayout();
spread.repaint();
関連トピック