フロントエンド開発でスプレッドシート機能の最短導入を実現するSpreadJSの使い方（4）グループ化

// SpreadJSのシートを取得します
var sheet = spread.getActiveSheet();

// 行のグループ化 - 4行目から2行分をグループ化します
sheet.rowOutlines.group(3, 2);

// 列のグループ化 - 2列目から1列分をグループ化します
sheet.columnOutlines.group(1, 1);

// SpreadJSのシートを取得します
var sheet = spread.getActiveSheet();

// 4行目から2行分をグループ化します
sheet.rowOutlines.group(3, 2);

// 7行目から2行分をグループ化します
sheet.rowOutlines.group(6, 2);

// 多段のグループ化設定 - 4行目から6行分をグループ化します
sheet.rowOutlines.group(3, 6);

// 行グループを折り畳みます
sheet.rowOutlines.expand(0, false);

// 列グループを折り畳みます
sheet.columnOutlines.expand(0, false);

//--------------------------------------
// 行グループのボタン位置を設定します
//--------------------------------------
// グループの先頭行位置にボタンを表示する場合
sheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.forward);

// グループの末尾行位置にボタンを表示する場合
sheet.rowOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);

//--------------------------------------
// 列グループのボタン位置を設定します
//--------------------------------------
// グループの先頭列位置にボタンを表示する場合
sheet.columnOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.forward);

// グループの末尾列位置にボタンを表示する場合
sheet.columnOutlines.direction(GC.Spread.Sheets.Outlines.OutlineDirection.backward);

/* グループ領域の背景色設定 */
.gc-group {
  background-color: #f4f8eb;
  color: #bbbbbb;
  border-width: 0px;
  border-style: solid;
}

/* グループ領域の境界線設定 */
.gc-group-line {
  border-width: 2px;
  border-style: solid;
  border-color: rgb(137, 137, 137);
}

/* グループ領域にあるドットの色設定 */
.gc-group-dot {
  color: rgb(247, 167, 17);
}

/* グループ領域にある展開ボタン画像の設定 */
.gc-group-box-expand {
  border-color: transparent;
  background-image: url('./minus.png');
  background-color: transparent;
}

/* グループ領域にある折り畳みボタン画像の設定 */
.gc-group-box-collapsed {
  border-color: transparent;
  background-image: url('./add.png');
  background-color: transparent;
}