You can set auto merge using the autoMerge method for both rows and columns.
The following code will apply auto merge in column direction preferentially then in row direction.
The following code will apply auto merge in row direction preferentially then in column direction.
The following code will apply auto merge in column direction.
The following code will apply auto merge in row direction.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(_getElementById('ss'), { sheetCount: 1 });
initSpread(spread);
};
function initSpread(spread) {
var switchAutoMergeDirection = _getElementById("switchAutoMergeDirection");
switchAutoMergeDirection.addEventListener("change", function (event) {
var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1);
var sheet = spread.getActiveSheet();
sheet.suspendPaint();
//remove old auto merge range
sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.none);
//add new auto merge range
sheet.autoMerge(range, parseInt(event.target.value));
sheet.resumePaint();
});
spread.suspendPaint();
spread.options.showVerticalScrollbar = false;
spread.options.showHorizontalScrollbar = false;
spread.options.tabStripVisible = false;
//init sheet
var sheet = spread.getActiveSheet();
sheet.defaults.rowHeight = 40;
sheet.defaults.colWidth = 100;
sheet.defaults.colHeaderRowHeight = 40;
sheet.defaults.rowHeaderColWidth = 60;
sheet.setRowCount(5);
sheet.setColumnCount(7);
var defaultStyle = sheet.getDefaultStyle();
defaultStyle.vAlign = GC.Spread.Sheets.VerticalAlign.center;
defaultStyle.hAlign = GC.Spread.Sheets.HorizontalAlign.center;
sheet.setDefaultStyle(defaultStyle);
["Monday", "Tuesday", "Wednesday", "Thursday", "Friday", "Saturday", "Sunday"].forEach(function (value, index) {
sheet.setValue(0, index, value, GC.Spread.Sheets.SheetArea.colHeader);
});
["12:00", "13:00", "14:00", "15:00", "16:00"].forEach(function (value, index) {
sheet.setValue(index, 0, value, GC.Spread.Sheets.SheetArea.rowHeader);
});
sheet.setArray(0, 0, [
["Walker", "Morning Show", "Morning Show", "Sport", "Weather", "N/A", "N/A"],
["Today Show", "Today Show", "Sesame Street", "Football", "Market Watch", "N/A", "N/A"],
["Today Show", "Today Show", "Kid Zone", "Football", "Soap Opera", "N/A", "N/A"],
["News", "News", "News", "News", "News", "N/A", "N/A"],
["News", "News", "News", "News", "News", "N/A", "N/A"]
]);
//apply auto merge
var range = new GC.Spread.Sheets.Range(-1, -1, -1, -1);
sheet.autoMerge(range, GC.Spread.Sheets.AutoMerge.AutoMergeDirection.columnRow);
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 class="options-container">
<div class="option-row">
Changes the auto merge direction.
<select id="switchAutoMergeDirection">
<option value="0">None</option>
<option value="1">column</option>
<option value="2">row</option>
<option value="3" selected="selected">columnRow</option>
<option value="4">rowColumn</option>
</select>
</div>
</div>
</div>
</body>
</html>
.sample-tutorial {
position: relative;
height: 100%;
overflow: hidden;
}
.sample-spreadsheets {
width: calc(100% - 280px);
height: 100%;
overflow: hidden;
float: left;
}
.options-container {
float: right;
width: 280px;
padding: 12px;
height: 100%;
box-sizing: border-box;
background: #fbfbfb;
overflow: auto;
}
.option-row {
font-size: 14px;
padding: 5px;
margin-top: 10px;
}
#switchAutoMergeDirection {
margin: 10px 0px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
