You can set auto merge for a range of row and/or column headers using the fourth parameter of the autoMerge method.
The following code will apply auto merge for the column header area.
The following code will apply auto merge for the row header area.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
spread.suspendPaint();
var sheet = spread.getActiveSheet();
sheet.setRowCount(10);
sheet.setColumnCount(8);
sheet.defaults.rowHeight = 40;
sheet.defaults.colWidth = 100;
sheet.defaults.colHeaderRowHeight = 40;
sheet.defaults.rowHeaderColWidth = 100;
sheet.setRowCount(2, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setColumnCount(2, GC.Spread.Sheets.SheetArea.rowHeader);
[2018, 2018, 2018, 2018, 2019, 2019, 2019, 2019].forEach(function (value, index) {
sheet.setValue(0, index, value, GC.Spread.Sheets.SheetArea.colHeader);
});
["Q1", "Q2", "Q3", "Q4","Q1", "Q2", "Q3", "Q4"].forEach(function (value, index) {
sheet.setValue(1, index, value, GC.Spread.Sheets.SheetArea.colHeader);
});
["Group1", "Group1", "Group1", "Group1","Group2", "Group2", "Group2", "Group3", "Group3", "Group4"].forEach(function (value, index) {
sheet.setValue(index, 0, value, GC.Spread.Sheets.SheetArea.rowHeader);
});
["Company1", "Company2", "Company3", "Company4","Company5", "Company6", "Company7", "Company8", "Company9", "Company10"].forEach(function (value, index) {
sheet.setValue(index, 1, value, GC.Spread.Sheets.SheetArea.rowHeader);
});
for (var r = 0; r < 10; r++) {
for (var c = 0; c < 8; c++) {
sheet.setValue(r, c, Math.round(Math.random() * 10000));
}
}
//apply auto merge
var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1);
sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.row, GC.Spread.Sheets.AutoMerge.AutoMergeMode.free, GC.Spread.Sheets.SheetArea.colHeader);
sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.column, GC.Spread.Sheets.AutoMerge.AutoMergeMode.free, GC.Spread.Sheets.SheetArea.rowHeader);
spread.resumePaint();
}
function _getElementById(id) {
return document.getElementById(id);
}
<!doctype html>
<html style="height:100%;font-size:14px;">
<head>
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<link rel="stylesheet" type="text/css" href="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/en/purejs/node_modules/@mescius/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/data/data.js" type="text/javascript"></script>
<script src="$DEMOROOT$/spread/source/js/license.js" type="text/javascript"></script>
<script src="app.js" type="text/javascript"></script>
<link rel="stylesheet" type="text/css" href="styles.css">
</head>
<body>
<div class="sample-tutorial">
<div id="ss" class="sample-spreadsheets"></div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: 100%;
height: 100%;
overflow: hidden;
float: left;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
