Headers

This sample shows how you can custom the row and column header in worksheet.

<p>SpreadJS allows you to add multiple headers and to create custom header text.</p> <p>In SpreadJS, a sheet consists of four areas:</p> <ul> <li><strong>corner</strong></li> <li><strong>colHeader</strong></li> <li><strong>rowHeader</strong></li> <li><strong>viewport</strong></li> </ul> <p>Therefore, the sheet's header includes a row header and a column header. Both headers can have multiple rows or columns.</p> <p>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:</p> <pre><code class="hljs js language-js"> sheet.options.rowHeaderAutoTextIndex = <span class="hljs-number">0</span>; sheet.options.rowHeaderAutoTextIndex; sheet.options.colHeaderAutoTextIndex = <span class="hljs-number">0</span>; sheet.options.colHeaderAutoTextIndex; </code></pre> <p>Spread also provides three types of header auto text to choose from: blank, letters, and numbers.</p> <pre><code class="hljs js language-js"> sheet.options.rowHeaderAutoText = GC.Spread.Sheets.HeaderAutoText.letters; sheet.options.colHeaderAutoText = GC.Spread.Sheets.HeaderAutoText.blank; </code></pre> <p>You can choose to hide the row header or column header. The following code hides all the rows in the row header.</p> <pre><code class="hljs js language-js"> sheet.options.rowHeaderVisible = <span class="hljs-literal">false</span>; </code></pre>
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, 1, 3, GC.Spread.Sheets.SheetArea.colHeader); sheet.setValue(0, 0, "Spanned Columns", GC.Spread.Sheets.SheetArea.colHeader); sheet.setValue(1, 0, "Address", GC.Spread.Sheets.SheetArea.colHeader); sheet.getCell(-1, 0).width(140); //Add data sheet.getCell(0,0).text("1970 Napa Ct."); sheet.getCell(1,0).text("9833 Mt. Dias Blv."); sheet.getCell(2,0).text("7484 Roundtree Drive"); sheet.getCell(3,0).text("9539 Glenside Dr"); sheet.getCell(4,0).text("1226 Shoe St."); 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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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"> <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; }