選択

Spread.Sheets内のセル、行、列、または複数の範囲を選択できます。

<p>シート上の特定領域を選択するには、1つのセルをクリックして、マウスでドラッグします。これで、選択領域が作成されます。</p> <p>選択領域の境界線の色および背景色を変更するには、次のコードに示すように、<strong>selectionBorderColor</strong>および<strong>selectionBackColor</strong>オプションを使用します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> spread = GC.Spread.Sheets.findControl(<span class="hljs-built_in">document</span>.getElementById(<span class="hljs-string">'ss'</span>)); <span class="hljs-keyword">var</span> sheet = spread.getActiveSheet(); sheet.options.selectionBorderColor = <span class="hljs-string">'red'</span>; sheet.options.selectionBackColor = <span class="hljs-string">'transparent'</span>; </code></pre> <p>ユーザーが選択可能なアイテムを設定するには、<strong>selectionPolicy</strong>および<strong>selectionUnit</strong>オプションを使用します。<strong>SelectionPolicy</strong>には、以下のタイプがあります。</p> <ul> <li><strong>single: 1つの項目のみを選択できます。</strong></li> <li><strong>range: 1つの項目と項目の範囲を選択できますが、複数の範囲は選択できません。</strong></li> <li><strong>mutliRange: 1つの項目と項目の範囲を選択でき、複数の範囲も選択できます。</strong></li> </ul> <p><strong>SelectionUnit</strong>には、以下のタイプがあります。</p> <ul> <li><strong>cell: 選択できる最小単位がセルであることを示します。</strong></li> <li><strong>row: 選択できる最小単位が行であることを示します。</strong></li> <li><strong>column: 選択できる最小単位が列であることを示します。</strong></li> </ul> <p>これらの2つのメソッドにより、選択モードを制御することができます。</p> <p>複数の領域を選択するには、[Ctrl]キーを押しながら必要な領域を選択します。また、<strong>addSelection</strong>メソッドを使用しても、選択領域を追加できます。すべての選択領域を取得するには、<strong>getSelections</strong>メソッドを使用します。選択領域をクリアするには、<strong>clearSelection</strong>メソッドを使用します。次のコードは、これらのメソッドの用法を示します。</p> <pre><code class="hljs js language-js"> sheet.addSelection(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">3</span>, <span class="hljs-number">3</span>); sheet.addSelection(<span class="hljs-number">4</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>, <span class="hljs-number">2</span>); sheet.clearSelection(); <span class="hljs-keyword">var</span> selections = sheet.getSelections(); <span class="hljs-comment">// clearSelectionの後、selections.lengthは0です。</span> </code></pre> <p>ワークブックの<strong>allowUserDeselect</strong>オプションを使用すると、ユーザーに対し、現在の選択領域をマウスで選択解除できるようにするかどうかを定義できます。</p> <p>セルをマウスで選択するだけでなく、<strong>setSelection</strong>メソッドを使用して複数のセルを選択することも、<strong>setActiveCell</strong>メソッドを使用して1つのセルを選択することもできます。アクティブセルは、選択領域内の先頭セルです。アクティブセルの行および列インデックスを取得するには、次のコードに示すように、<strong>getActiveRowIndex</strong>および<strong>getActiveColumnIndex</strong>メソッドを使用します。</p> <pre><code class="hljs js language-js"> sheet.setSelection(<span class="hljs-number">0</span>, <span class="hljs-number">0</span>, <span class="hljs-number">3</span>, <span class="hljs-number">3</span>); sheet.setActiveCell(<span class="hljs-number">20</span>, <span class="hljs-number">3</span>, <span class="hljs-number">2</span>, <span class="hljs-number">2</span>); <span class="hljs-keyword">var</span> activeRowIndex = sheet.getActiveRowIndex(); <span class="hljs-keyword">var</span> activeColumnIndex = sheet.getActiveColumnIndex(); </code></pre> <p>アクティブセルを設定したにもかかわらず、このセルが表示されていない場合は、<strong>showCell</strong>、<strong>showRow</strong>、および<strong>showColumn</strong>の各メソッドを使用して、アクティブセルを表示できます。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">var</span> verticalPosition = GC.Spread.Sheets.VerticalPosition.top; <span class="hljs-keyword">var</span> horizontalPosition = GC.Spread.Sheets.HorizontalPosition.left; sheet.showCell(<span class="hljs-number">20</span>, <span class="hljs-number">3</span>, verticalPosition, horizontalPosition); <span class="hljs-comment">// 以下の2つのコードは、同じ結果になります。</span> sheet.showColumn(<span class="hljs-number">3</span>, horizontalPosition); sheet.showRow(<span class="hljs-number">20</span>, verticalPosition); </code></pre>
window.onload = function() { var spread = new GC.Spread.Sheets.Workbook(document.getElementById('ss'), { sheetCount: 1 }); spread.suspendPaint(); initSpread(spread); spread.resumePaint(); }; function initSpread(spread) { var sd = dataSource; var sheet = spread.getActiveSheet(); if (sd.length > 0) { sheet.setDataSource(sd); } sheet.setColumnWidth(0, 160); sheet.setColumnWidth(1, 70); sheet.setColumnWidth(2, 90); sheet.setColumnWidth(3, 110); sheet.setColumnWidth(4, 80); sheet.setColumnWidth(6, 110); _getElementById('selectionPolicy').addEventListener('change', function() { var sheet = spread.getActiveSheet(); var policy = parseInt(this.value, 10); sheet.selectionPolicy(policy); }); _getElementById('selectionUnit').addEventListener('change', function() { var sheet = spread.getActiveSheet(); var unit = parseInt(this.value, 10); sheet.selectionUnit(unit); }); _getElementById('setBackColor').addEventListener('click', function() { var sheet = spread.getActiveSheet(); var backColor = _getElementById('backColor').value; sheet.options.selectionBackColor = backColor; }); _getElementById('setBorderColor').addEventListener('click', function() { var sheet = spread.getActiveSheet(); var borderColor = _getElementById('borderColor').value; sheet.options.selectionBorderColor = borderColor; }); _getElementById('tabStoptrue_Btn').addEventListener('click', function() { setIsTabStop(spread, true); }); _getElementById('tabStopfalse_Btn').addEventListener('click', function() { setIsTabStop(spread, false); }); _getElementById('chk_allowDeselect').addEventListener('click', function() { spread.options.allowUserDeselect = this.checked; }); } function setIsTabStop(spread, isTabStop) { var sheet = spread.getActiveSheet(); sheet.suspendPaint(); var sels = sheet.getSelections(); for (var index = 0; index < sels.length; index++) { var selRange = sels[index]; if (selRange.col >= 0 && selRange.row >= 0) { sheet.getRange(selRange.row, selRange.col, selRange.rowCount, selRange.colCount).tabStop(isTabStop); } else if (selRange.row >= 0) { sheet.getRange(selRange.row, -1, selRange.rowCount, -1).tabStop(isTabStop); } else if (selRange.col >= 0) { sheet.getRange(-1, selRange.col, -1, selRange.colCount).tabStop(isTabStop); } } sheet.resumePaint(); } 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$/spread/source/data/data.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="selectionPolicy" class="normal">選択ポリシー:</label> </div> <div class="option-row"> <select id="selectionPolicy"> <option value="0">Single</option> <option value="1">Range</option> <option value="2" selected="selected">MultiRange</option> </select> </div> <div class="option-row"> <label for="selectionUnit" class="normal">選択単位:</label> </div> <div class="option-row"> <select id="selectionUnit"> <option value="0" selected="selected">Cell</option> <option value="1">Row</option> <option value="2">Column</option> </select> </div> <div class="option-row"> <input type="checkbox" id="chk_allowDeselect" checked /> <label for="chk_allowDeselect">ユーザーに選択解除を許可</label> </div> <div class="option-row"> <label for="backColor" class="wide">選択領域の背景色:</label> </div> <div class="option-row"> <input type="text" id="backColor" value="rgba(204,255,51, 0.3)" /> <input type="button" value="設定" id="setBackColor" class="narrow" /> </div> <div class="option-row"> <label for="borderColor" class="wide">選択領域の枠線の色:</label> </div> <div class="option-row"> <input type="text" id="borderColor" value="Accent 3 -40" /> <input type="button" value="設定" id="setBorderColor" class="narrow" /> </div> <div class="option-row"> <input type="button" id="tabStoptrue_Btn" value="SetTabStop True" class="wide" style="padding-top: 4px" /> <input type="button" id="tabStopfalse_Btn" value="SetTabStop False" class="wide" style="padding-top: 4px" /> <label style="display: block;padding-top: 10px;">このコントロールを使用して、ユーザーが[Tab]キーを使用して選択領域にフォーカスを設定できるかどうかを指定します。</label> </div> </div> </div></body> </html>
input[type="text"] { width: 160px; } label.normal { display: inline-block; width: 120px; } select { width: 120px; height: 35px; } label.wide { display: inline-block; width: 160px; } input[type="button"].narrow { width: 60px; } input[type="button"].wide { width: 160px; } .colorLabel { background-color: lavender; } .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; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }