行と列

SpreadJSでは、複数の行および列によって個々のシート領域が構成されます。Spread.Sheetsには、行と列をカスタマイズするためのさまざまなメソッドがあります。

<p>各シート領域の行数または列数を変更するには、<strong>setRowCount</strong>および<strong>setColumnCount</strong>メソッドを使用します。また、<strong>addRows</strong>、<strong>addColumns</strong>、<strong>deleteRows</strong>、および<strong>deleteColumns</strong>メソッドを使用しても、ビューポート内の行数および列数を変更できます。</p> <p>以下の各コード行はいずれも、シートのビューポート領域内の行数を変更します。</p> <pre><code class="hljs js language-js"> sheet.setRowCount(<span class="hljs-number">20</span>, GC.Spread.Sheets.SheetArea.viewport); sheet.addRows(<span class="hljs-number">5</span>, <span class="hljs-number">10</span>); sheet.deleteRows(<span class="hljs-number">20</span>, <span class="hljs-number">10</span>); </code></pre> <p>行または列のresizeableプロパティがfalseであれば、この行または列をユーザーがサイズ変更することはできません。しかしこの場合でも、高さや幅をコードから直接変更できます。</p> <pre><code class="hljs js language-js"> sheet.setRowResizable(<span class="hljs-number">1</span>, <span class="hljs-literal">false</span>); sheet.setColumnResizable(<span class="hljs-number">1</span>, <span class="hljs-literal">true</span>); sheet.setRowHeight(<span class="hljs-number">1</span>, <span class="hljs-number">20</span>); sheet.setColumnWidth(<span class="hljs-number">1</span>, <span class="hljs-number">40</span>); </code></pre> <p>行または列を表示するかどうかを指定するには、<strong>setRowVisible</strong>および<strong>setColumnVisible</strong>メソッドを使用します。</p> <pre><code class="hljs js language-js"> sheet.setRowVisible(<span class="hljs-number">1</span>, <span class="hljs-literal">false</span>); sheet.setColumnVisible(<span class="hljs-number">1</span>, <span class="hljs-literal">true</span>); </code></pre> <p>シートのビューポート領域において、行または列が自動調整されるように設定されている場合は、保持するデータの長さによって行の高さまたは列幅が決まります。行または列が自動調整されるように設定するには、次のコードを使用します。</p> <pre><code class="hljs js language-js"> sheet.autoFitColumn(<span class="hljs-number">1</span>); sheet.autoFitRow(<span class="hljs-number">1</span>); </code></pre> <p>Spread.Sheetsにはこれ以外にも、シートの行または列についての有用な情報を取得するための、以下のような多数のメソッドが用意されています。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> rowCount = sheet.getRowCount(); <span class="hljs-keyword">var</span> columnCount = sheet.getColumnCount(); <span class="hljs-keyword">var</span> cell = sheet.getCell(<span class="hljs-number">7</span>, <span class="hljs-number">7</span>); <span class="hljs-keyword">var</span> cells = sheet.getCells(<span class="hljs-number">2</span>, <span class="hljs-number">2</span>, <span class="hljs-number">7</span>, <span class="hljs-number">7</span>); <span class="hljs-keyword">var</span> rowHeight = sheet.getRowHeight(<span class="hljs-number">7</span>); <span class="hljs-keyword">var</span> columnWidth = sheet.getColumnWidth(<span class="hljs-number">7</span>); ... </code></pre> <p><strong>resizeZeroIndicator</strong>メソッドを使用すると、行の高さや列幅が0の場合にヘッダ上に表示される、グリッド線の外観を制御することができます。パラメータはenum値、<strong>ResizeZeroIndicator</strong>です。</p> <ul> <li><strong>default: グリッド線(シングル)</strong></li> <li><strong>enhanced: グリッド線(ダブル)(初期値)</strong></li> </ul> <pre><code class="hljs js language-js"> sheet.setRowHeight(<span class="hljs-number">4</span>, <span class="hljs-number">0</span>); sheet.setColumnWidth(<span class="hljs-number">2</span>, <span class="hljs-number">0</span>); spread.resizeZeroIndicator(GC.Spread.Sheets.ResizeZeroIndicator.enhanced); <span class="hljs-comment">// spread.resizeZeroIndicator(GC.Spread.Sheets.ResizeZeroIndicator.default);</span> </code></pre>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(_getElementById("ss")); var spreadNS = GC.Spread.Sheets, sheet = spread.getSheet(0), SheetArea = spreadNS.SheetArea; sheet.suspendPaint(); sheet.setRowCount(2, SheetArea.colHeader); sheet.setRowCount(10, SheetArea.viewport); sheet.setColumnCount(2, SheetArea.rowHeader); sheet.setColumnCount(6, SheetArea.viewport); sheet.setRowHeight(4, 0); sheet.setColumnWidth(2, 0); spread.options.resizeZeroIndicator = spreadNS.ResizeZeroIndicator.enhanced; for (var rowIndex = 0; rowIndex <= 9; rowIndex++) { sheet.setText(rowIndex, 0, "Value"); sheet.setFormula(rowIndex, 1, "RandBetween(45,85)"); } sheet.resumePaint(); _getElementById("resizeZeroIndicator").value=spread.options.resizeZeroIndicator; _getElementById("resizeZeroIndicator").addEventListener('change',function () { spread.options.resizeZeroIndicator = + this.value; }); /* * Add a row in viewport area. */ _getElementById("btnAddRow").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { sheet.addRows(sheet.getRowCount(SheetArea.viewport), 1); } }); /* * Delete a row in viewport area. */ _getElementById("btnAddColumn").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { sheet.addColumns(sheet.getColumnCount(SheetArea.viewport), 1); } }); /* * Add a column in viewport area. */ _getElementById("btnDeleteRow").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { sheet.deleteRows(sheet.getRowCount(SheetArea.viewport) - 1, 1); } }); /* * Delete a column in viewport area. */ _getElementById("btnDeleteColumn").addEventListener('click', function () { var sheet = spread.getActiveSheet(); if (sheet) { sheet.deleteColumns(sheet.getColumnCount(SheetArea.viewport) - 1, 1); } }); /* * Show or hide the specified row. */ _getElementById("chkRowVisible").addEventListener('click', function () { var sheet = spread.getActiveSheet(); var rowIndex = parseInt(_getElementById("rowIndex").value); if (!isNaN(rowIndex)) { sheet.setRowVisible(rowIndex, this.checked); } }); /* * Auto fit or not fit the specified row. */ _getElementById("chkRowAutoFit").addEventListener('click', function () { var sheet = spread.getActiveSheet(); var rowIndex = parseInt(_getElementById("rowIndex").value); if (!isNaN(rowIndex)) { var checked = this.checked; if (checked) { sheet.autoFitRow(rowIndex); } } }); /* * Show or hide the specified column. */ _getElementById("chkColumnVisible").addEventListener('click', function () { var sheet = spread.getActiveSheet(); var columnIndex = parseInt(_getElementById("columnIndex").value); if (!isNaN(columnIndex)) { sheet.setColumnVisible(columnIndex, this.checked); } }); /* * Auto fit or not fit the specified column. */ _getElementById("chkColumnAutoFit").addEventListener('click', function () { var sheet = spread.getActiveSheet(); var columnIndex = parseInt(_getElementById("columnIndex").value); if (!isNaN(columnIndex)) { var checked = this.checked; if (checked) { sheet.autoFitColumn(columnIndex); } } }); }; 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"> <input type="button" value="行を追加" id="btnAddRow" /> <input type="button" value="行を削除" id="btnDeleteRow" /> </div> <div class="option-row"> <input type="button" value="列を追加" id="btnAddColumn" /> <input type="button" value="列を削除" id="btnDeleteColumn" /> </div> <div class="option-row"> <label for="rowIndex" style="display: inline-block">行インデックス:</label> <input type="text" id="rowIndex" /> <br/> <label for="rowIndex" style="padding-top: 6px">インデックスは0から開始されます。</label> <div class="option-row"> <input type="checkbox" id="chkRowVisible" checked /> <label for="chkRowVisible">行を表示</label> </div> <div class="option-row"> <input type="checkbox" id="chkRowAutoFit" /> <label for="chkRowAutoFit">行を自動調整</label> </div> </div> <div class="option-row"> <label for="columnIndex" style="display: inline-block">列インデックス:</label> <input type="text" id="columnIndex" /> <br/> <label for="columnIndex" style="padding-top: 6px">インデックスは0から開始されます。</label> <div class="option-row"> <input type="checkbox" id="chkColumnVisible" checked /> <label for="chkColumnVisible">列を表示</label> </div> <div class="option-row"> <input type="checkbox" id="chkColumnAutoFit" /> <label for="chkColumnAutoFit">列を自動調整</label> </div> </div> <hr /> <div class="option-row"> <span>ResizeZeroIndicator:</span> <select id="resizeZeroIndicator"> <option value="0">Default</option> <option value="1">Enhanced</option> </select> </div> </div> </div></body> </html>
input[type="text"] { width: 200px; } .colorLabel { background-color: lavender; width: 170px; } .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 { display: inline-block; } input[type=button] { margin-top: 6px; width: 110px; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }