ビューポートと枠固定

Spread.Sheetsのシートはコーナーセル、行ヘッダ、列ヘッダ、およびビューポートの4つの領域で構成されています。ビューポートは、シートの右下に位置する領域です。

<p>シートの固定行および固定列は、シートのビューポート領域上で固定線により区切られ、スクロールされずに位置が固定されます。固定線により、ビューポートはいくつかの行ビューポート、およびいくつかの列ビューポートに分割されます。</p> <p>1つのシートでは、最大4つの固定線を設定できます。最大数の固定線を設定すると、現在のビューポートが3つの行ビューポート、および3つの列ビューポートに分割されます。次のコードは、シート上に4つの固定線を作成します。</p> <pre><code class="hljs js language-js"> <span class="hljs-comment">// 固定行と固定列を設定します。</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>次のコードに示すように、固定線の色をカスタマイズすることもできます。</p> <pre><code class="hljs js language-js"> sheet.options.frozenlineColor = <span class="hljs-string">'red'</span>; </code></pre> <p>Spread.Sheetsには、個々のビューポートに関する情報(幅、高さ、最上行など)を取得するためのいくつものメソッドが用意されています。</p> <p>シートに、行および列に対する固定線を設定しているとします。元のビューポートは3つの行ビューポートに分割されており、各ビューポートのインデックスはそれぞれ0、1、2となります。この場合、次のコードを使用することで、第2ビューポートの情報を取得できます。</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 name="spreadjs culture" content="ja-jp" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/ja/purejs/node_modules/@grapecity/spread-sheets-resources-ja/dist/gc.spread.sheets.resources.ja.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="設定" 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; }