Frozen Lines and Viewport

The SpreadJS sheet consists of four areas: corner, rowHeader, colHeader, and viewport. The viewport is the bottom right area of the sheet.

<p>The sheet's frozen rows and columns prevent rows and columns from scrolling in the sheet's viewport area using a frozen line divider. The frozen lines also divide the viewport into several row and column viewports.</p> <p>You can set at most four different frozen lines in a sheet. Doing so will divide the current viewport into three row viewports and three column viewports. The following code creates four frozen lines in a sheet:</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">//set row frozenline and column frozenline.</span> sheet.frozenRowCount(<span class="hljs-number">3</span>); sheet.frozenColumnCount(<span class="hljs-number">3</span>); sheet.frozenTrailingRowCount(<span class="hljs-number">3</span>); sheet.frozenTrailingColumnCount(<span class="hljs-number">3</span>); </code></pre> <p>You can customize the frozenLine's color, as shown in the following code:</p> <pre><code class="hljs js language-js"> sheet.options.frozenlineColor = <span class="hljs-string">'red'</span>; </code></pre> <p>SpreadJS provides methods for you to get the information for each viewport, such as the width, height, topRow, and so on.</p> <p>Supposing you have set a frozen row line and a frozen column line in a sheet. The original viewport has been divided into three row viewports, and the viewport indexes are 0, 1, and 2. You could then use the following code to get the information for the second viewport:</p> <pre><code class="hljs js language-js"> sheet.getViewportWidth(<span class="hljs-number">1</span>); sheet.getViewportHeight(<span class="hljs-number">1</span>); sheet.getViewportTopRow(<span class="hljs-number">1</span>); sheet.getViewportBottomRow(<span class="hljs-number">1</span>); sheet.getViewportLeftColumn(<span class="hljs-number">1</span>); sheet.getViewportRightColumn(<span class="hljs-number">1</span>); </code></pre>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss')); spread.suspendPaint(); var sheet = spread.getSheet(0); sheet.frozenRowCount(3); sheet.frozenColumnCount(3); sheet.options.gridline.showHorizontalGridline = false; sheet.options.gridline.showVerticalGridline = false; sheet.options.frozenlineColor = 'red'; sheet.setColumnCount(20); sheet.setRowCount(30); sheet.setColumnWidth(0, 10); sheet.setColumnWidth(1, 10); sheet.setColumnWidth(2, 100); sheet.setColumnWidth(3, 120); sheet.setColumnWidth(4, 120); sheet.setColumnWidth(5, 120); sheet.setColumnWidth(6, 120); sheet.setColumnWidth(7, 120); sheet.setColumnWidth(8, 120); sheet.setRowHeight(3, 30); sheet.setRowHeight(4, 30); sheet.setRowHeight(5, 30); sheet.setRowHeight(6, 30); sheet.setRowHeight(7, 30); sheet.setRowHeight(8, 30); sheet.setRowHeight(9, 30); sheet.setRowHeight(10, 30); sheet.setRowHeight(11, 30); sheet.setRowHeight(12, 30); sheet.setRowHeight(13, 30); sheet.setRowHeight(14, 30); sheet .getCell(2, 3) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(140, 209, 239)'); sheet .getCell(2, 4) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(140, 209, 239)'); sheet .getCell(2, 5) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(140, 209, 239)'); sheet .getCell(2, 6) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(140, 209, 239)'); sheet .getCell(2, 7) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(140, 209, 239)'); sheet .getCell(2, 8) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(140, 209, 239)'); sheet.addSpan(0, 0, 3, 3); sheet.addSpan(0, 3, 2, 6); sheet.setValue(0, 3, 'Weather Card'); sheet .getRange(0, 3, 2, 6) .hAlign(GC.Spread.Sheets.HorizontalAlign.center) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(124, 186, 235)'); sheet.setValue(2, 3, 'weatherDesc'); sheet.setValue(2, 4, 'maxTempF'); sheet.setValue(2, 5, 'minTempF'); sheet.setValue(2, 6, 'precipMM'); sheet.setValue(2, 7, 'windspeedMiles'); sheet.setValue(2, 8, 'Humidity'); sheet.setValue(3, 2, '2017/02/01'); sheet.setValue(4, 2, '2017/02/02'); sheet.setValue(5, 2, '2017/02/03'); sheet.setValue(6, 2, '2017/02/04'); sheet.setValue(7, 2, '2017/02/05'); sheet.setValue(8, 2, '2017/02/06'); sheet.setValue(9, 2, '2017/02/07'); sheet.setValue(10, 2, '2017/02/08'); sheet.setValue(11, 2, '2017/02/09'); sheet.setValue(12, 2, '2017/02/10'); sheet.setValue(13, 2, '2017/02/11'); sheet.setValue(14, 2, '2017/02/12'); sheet .getCell(3, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(4, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(5, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(6, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(7, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(8, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(9, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(10, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(11, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(12, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(13, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet .getCell(14, 2) .hAlign(GC.Spread.Sheets.HorizontalAlign.right) .vAlign(GC.Spread.Sheets.VerticalAlign.center) .backColor('rgb(165, 241, 240)'); sheet.setArray(3, 3, [ [ 'Rain', '19c', '14c', '80%', '11km/h', '76%' ], [ 'Mostly Cloudy', '23c', '15c', '20%', '19km/h', '62%' ], [ 'Thunderstorm', '24c', '14c', '90%', '14km/h', '77%' ], [ 'Partly Cloudy', '24c', '14c', '10%', '26km/h', '56%' ], [ 'Partly Cloudy', '27c', '17c', '10%', '11km/h', '57%' ], [ 'Cloudy', '27c', '19c', '20%', '16km/h', '71%' ], [ 'Most Sunny', '28c', '18c', '10%', '18km/h', '60%' ], [ 'Most Sunny', '28c', '17c', '0%', '19km/h', '53%' ], [ 'Sunny', '29c', '21c', '0%', '11km/h', '59%' ], [ 'Cloudy', '28c', '19c', '10%', '15km/h', '60%' ], [ 'Partly Cloudy', '24c', '18c', '40%', '17km/h', '66%' ], [ 'Rain', '25c', '16c', '70%', '14km/h', '72%' ] ]); for (var row = 3; row < 15; row++) { for (var col = 3; col < 9; col++) { sheet.getCell(row, col).backColor('rgb(200, 190, 240)'); } } spread.resumePaint(); _getElementById('btnSetFrozenLine').addEventListener('click', function() { var sheet = spread.getActiveSheet(); if (_getElementById('rowCount').value) { var rowCount = parseInt(_getElementById('rowCount').value); sheet.frozenRowCount(rowCount); } if (_getElementById('trailingRowCount').value) { var trailingRowCount = parseInt(_getElementById('trailingRowCount').value); sheet.frozenTrailingRowCount(trailingRowCount); } if (_getElementById('columnCount').value) { var columnCount = parseInt(_getElementById('columnCount').value); sheet.frozenColumnCount(columnCount); } if (_getElementById('trailingColumnCount').value) { var trailingColumnCount = parseInt(_getElementById('trailingColumnCount').value); sheet.frozenTrailingColumnCount(trailingColumnCount); } }); }; 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"> <label for="rowCount">FrozenRowCount:</label> <input type="text" id="rowCount" value="2" /> </div> <div class="option-row"> <label for="trailingRowCount">FrozenTrailingRowCount:</label> <input type="text" id="trailingRowCount" /> </div> <div class="option-row"> <label for="columnCount">FrozenColumnCount:</label> <input type="text" id="columnCount" value="2" /> </div> <div class="option-row"> <label for="trailingColumnCount">FrozenTrailingColumnCount:</label> <input type="text" id="trailingColumnCount"/> </div> <div class="option-row"> <input type="button" value="Set" id="btnSetFrozenLine" /> </div> </div> </div> </body> </html>
input[type="text"] { width: 200px; box-sizing: border-box; } .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 { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; width:200px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }