SpreadJS allows you to add multiple headers and to create custom header text.
In SpreadJS, a sheet consists of four areas:
corner
colHeader
rowHeader
viewport
Therefore, the sheet's header includes a row header and a column header. Both headers can have multiple rows or columns.
In one of the header's rows or columns, each cell has automatic text ("auto text"), which indicates the index of the column or row. If you want to know which row or column displays the auto text, or display the auto text in a specific row or column, use code similar to the following:
Spread also provides three types of header auto text to choose from: blank, letters, and numbers.
You can choose to hide the row header or column header. The following code hides all the rows in the row header.
window.onload = function () {
var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"));
var spreadNS = GC.Spread.Sheets;
var sheet = spread.getSheet(0);
sheet.suspendPaint();
//Set rowHeader count and columnHeader count.
sheet.setRowCount(3, spreadNS.SheetArea.colHeader);
sheet.setColumnCount(3, spreadNS.SheetArea.rowHeader);
//Change header "auto text".
sheet.options.colHeaderAutoTextIndex = 2;
sheet.options.colHeaderAutoText = spreadNS.HeaderAutoText.numbers;
//Span three columns with the origin at column header cell (0,0).
sheet.addSpan(0, 0, 10, 1, GC.Spread.Sheets.SheetArea.rowHeader);
sheet.addSpan(0, 1, 5, 1, GC.Spread.Sheets.SheetArea.rowHeader);
sheet.addSpan(5, 1, 5, 1, GC.Spread.Sheets.SheetArea.rowHeader);
sheet.setValue(0, 1, "Sub 1.", GC.Spread.Sheets.SheetArea.rowHeader);
sheet.setValue(5, 1, "Sub 2.", GC.Spread.Sheets.SheetArea.rowHeader);
sheet.setValue(0, 0, "Cat.", GC.Spread.Sheets.SheetArea.rowHeader);
sheet.addSpan(0, 0, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
sheet.addSpan(0, 1, 1, 2, GC.Spread.Sheets.SheetArea.colHeader);
sheet.addSpan(0, 3, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
sheet.addSpan(0, 4, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
sheet.addSpan(0, 5, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
sheet.addSpan(0, 6, 2, 1, GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, 0, "No.", GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, 1, "Company", GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, 3, "Order ID", GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, 4, "Customer ID", GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, 5, "Employee ID", GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(0, 6, "Order Date", GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(1, 1, "Country", GC.Spread.Sheets.SheetArea.colHeader);
sheet.setValue(1, 2, "Company Name", GC.Spread.Sheets.SheetArea.colHeader);
sheet.getCell(-1, 0).width(40);
sheet.getRange(-1, 1, 1, 6).width(130);
sheet.getRange(-2, 1, 1, 2).width(130);
sheet.resumePaint();
/*
* Show or hide the row header.
*/
_getElementById("chkRowHeaderVisible").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
sheet.options.rowHeaderVisible = this.checked;
spread.invalidateLayout();
spread.repaint();
});
/*
* Show or hide the column header.
*/
_getElementById("chkColumnHeaderVisible").addEventListener('click',function () {
var sheet = spread.getActiveSheet();
sheet.options.colHeaderVisible = this.checked;
spread.invalidateLayout();
spread.repaint();
});
_getElementById("btnSetAutoText").addEventListener('click',function () {
var headerType = document.querySelector("input[name='headerType']:checked").value,
obj=_getElementById("headerAutoTextType"),
headerAutoTextType = obj.options[obj.selectedIndex].value;
if (headerAutoTextType) {
headerAutoTextType = spreadNS.HeaderAutoText[headerAutoTextType];
if (!(headerAutoTextType === undefined)) {
switch (headerType) {
case "row":
sheet.options.rowHeaderAutoText = headerAutoTextType;
break;
case "column":
sheet.options.colHeaderAutoText = headerAutoTextType;
break;
}
}
}
});
};
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/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">
<label>Set the options below to show the column/row header.</label>
<div class="option-row">
<input type="checkbox" id="chkColumnHeaderVisible" checked />
<label for="chkColumnHeaderVisible">ColumnHeaderVisible</label>
</div>
<div class="option-row">
<input type="checkbox" id="chkRowHeaderVisible" checked />
<label for="chkRowHeaderVisible">RowHeaderVisible</label>
</div>
<hr>
<div class="option-row">
<label >Set the type of auto text for the headers using the following options.</label>
</div>
<div class="option-row">
<input type="radio" name="headerType" value="row" id="headerTypeRow" /><label for="headerTypeRow">Row</label>
<input type="radio" name="headerType" value="column" id="headerTypeColumn" checked="checked" /><label for="headerTypeColumn">Column</label>
</div>
<div class="option-row">
<label for="headerAutoTextType" style="display:inline-block;">Header Auto Text type: </label>
</div>
<select id="headerAutoTextType" style="padding-left: 5px">
<option value="blank">Blank</option>
<option value="letters" selected="selected">Letters</option>
<option value="numbers">Numbers</option>
</select>
<input type="button" id="btnSetAutoText" value="Set" />
</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;
}
label {
margin-bottom: 6px;
}
input {
padding: 4px 6px;
}
input[type=button] {
margin-top: 6px;
}
body {
position: absolute;
top: 0;
bottom: 0;
left: 0;
right: 0;
}
