概要と基本的な使い方

SpreadJSでは、特定の数値やテキスト文字列など、Spread内のさまざまなアイテムを検索できます。この機能は、Spreadインスタンスに大量のデータが含まれており、特定のデータを見つけ出すのが困難に思われるような場合に便利です。

<p>指定のテキスト文字列または数値を検索するには、<strong>search</strong>メソッドを使用して、指定の条件に基づき、セル内のテキストを検索します。次に、この例を示します。</p> <pre><code class="hljs js language-js"> sheet.setText(<span class="hljs-number">6</span>, <span class="hljs-number">10</span>, <span class="hljs-string">'testSearch'</span>); <span class="hljs-keyword">var</span> searchCondition = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Search.SearchCondition(); searchCondition.searchString = <span class="hljs-string">'testSearch'</span>; <span class="hljs-keyword">var</span> searchresult = sheet.search(searchCondition); </code></pre> <p>検索条件をカスタマイズするには、<strong>SearchCondition</strong>を設定します。</p> <pre><code class="hljs js language-js"> <span class="hljs-keyword">this</span>.sheet.getCell(<span class="hljs-number">3</span>, <span class="hljs-number">3</span>).text(<span class="hljs-string">'Demo string for search'</span>); <span class="hljs-keyword">var</span> condition = <span class="hljs-keyword">new</span> GC.Spread.Sheets.Search.SearchCondition(); condition.searchString = <span class="hljs-string">'for'</span>; condition.startSheetIndex = <span class="hljs-number">0</span>; condition.endSheetIndex = <span class="hljs-number">0</span>; condition.searchFlags = GC.Spread.Sheets.Search.SearchFlags.ignoreCase | GC.Spread.Sheets.Search.SearchFlags.blockRange; condition.searchOrder = GC.Spread.Sheets.Search.SearchOrder.nOrder; condition.searchTarget = GC.Spread.Sheets.Search.SearchFoundFlags.cellText; condition.sheetArea = GC.Spread.Sheets.SheetArea.viewport; condition.rowStart = <span class="hljs-number">0</span>; condition.columnStart = <span class="hljs-number">0</span>; condition.rowEnd = <span class="hljs-number">10</span>; condition.columnEnd = <span class="hljs-number">10</span>; <span class="hljs-keyword">var</span> result = <span class="hljs-keyword">this</span>.spread.search(condition); </code></pre> <p>検索の実行後は、検索結果を取得できます。検索結果は、以下のプロパティを保持するオブジェクトとなります。</p> <ul> <li><strong>searchFoundFlag: 何が一致したかを指定する列挙体。</strong></li> <li><strong>foundSheetIndex: 一致が見つかったシートのインデックス。</strong></li> <li><strong>foundRowIndex: 一致が見つかった行のインデックス。</strong></li> <li><strong>foundColumnIndex: 一致が見つかった列のインデックス。</strong></li> <li><strong>foundString: 見つかった文字列。</strong></li> </ul>
var spreadNS = GC.Spread.Sheets, spread; window.onload = function () { spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 3}); spread.suspendPaint(); initSpread(spread); spread.resumePaint(); }; function initSpread(spread) { var sheet1 = spread.getSheet(0); sheet1.setColumnWidth(0, 100); sheet1.setColumnWidth(1, 100); sheet1.setValue(0, 0, 'Value'); sheet1.setValue(1, 0, 1); sheet1.setValue(2, 0, 2); sheet1.setValue(3, 0, 3); sheet1.addSpan(0, 1, 1, 2); sheet1.setValue(0, 1, 'Formula Result'); sheet1.setValue(1, 1, 'SUM(A2:A3)'); sheet1.setFormula(1, 2, '=SUM(A2:A3)'); var sheet2 = spread.getSheet(1); sheet2.setColumnWidth(0, 100); sheet2.setColumnWidth(1, 100); sheet2.setValue(0, 0, 'Value'); sheet2.setValue(1, 0, 1); sheet2.setValue(2, 0, 2); sheet2.setValue(3, 0, 3); sheet2.addSpan(0, 1, 1, 2); sheet2.setValue(0, 1, 'Formula Result'); sheet2.setValue(1, 1, 'SUM(A2:A3)'); sheet2.setFormula(1, 2, '=SUM(A2:A3)'); document.getElementById('btnFindNext').onclick = function () { var sheet = spread.getActiveSheet(); var searchCondition = getSearchCondition(); var within = document.getElementById('searchWithin').value; var searchResult = null; if (within == "sheet") { var sels = sheet.getSelections(); if (sels.length > 1) { searchCondition.searchFlags |= spreadNS.Search.SearchFlags.blockRange; } else if (sels.length == 1) { var spanInfo = getSpanInfo(sheet, sels[0].row, sels[0].col); if (sels[0].rowCount != spanInfo.rowSpan && sels[0].colCount != spanInfo.colSpan) { searchCondition.searchFlags |= spreadNS.Search.SearchFlags.blockRange; } } searchResult = getResultSearchinSheetEnd(searchCondition); if (searchResult == null || searchResult.searchFoundFlag == spreadNS.Search.SearchFoundFlags.none) { searchResult = getResultSearchinSheetBefore(searchCondition); } } else if (within == "workbook") { searchResult = getResultSearchinSheetEnd(searchCondition); if (searchResult == null || searchResult.searchFoundFlag == spreadNS.Search.SearchFoundFlags.none) { searchResult = getResultSearchinWorkbookEnd(searchCondition); } if (searchResult == null || searchResult.searchFoundFlag == spreadNS.Search.SearchFoundFlags.none) { searchResult = getResultSearchinWorkbookBefore(searchCondition); } if (searchResult == null || searchResult.searchFoundFlag == spreadNS.Search.SearchFoundFlags.none) { searchResult = getResultSearchinSheetBefore(searchCondition); } } if (searchResult != null && searchResult.searchFoundFlag != spreadNS.Search.SearchFoundFlags.none) { spread.setActiveSheetIndex(searchResult.foundSheetIndex); var sheet = spread.getActiveSheet(); sheet.setActiveCell(searchResult.foundRowIndex, searchResult.foundColumnIndex); if ((searchCondition.searchFlags & spreadNS.Search.SearchFlags.blockRange) == 0) { sheet.setActiveCell(searchResult.foundRowIndex, searchResult.foundColumnIndex, 1, 1); } //scrolling if (searchResult.foundRowIndex < sheet.getViewportTopRow(1) || searchResult.foundRowIndex > sheet.getViewportBottomRow(1) || searchResult.foundColumnIndex < sheet.getViewportLeftColumn(1) || searchResult.foundColumnIndex > sheet.getViewportRightColumn(1) ) { sheet.showCell(searchResult.foundRowIndex, searchResult.foundColumnIndex, spreadNS.VerticalPosition.center, spreadNS.HorizontalPosition.center); } else { sheet.repaint(); } } else { //Not Found alert('Not Found'); } }; } function getSpanInfo(sheet, row, col) { var span = sheet.getSpans(new spreadNS.Range(row, col, 1, 1)); if (span.length > 0) { return {rowSpan: span[0].rowCount, colSpan: span[0].colCount}; } else { return {rowSpan: 1, colSpan: 1}; } } function getResultSearchinSheetEnd(searchCondition) { var sheet = spread.getActiveSheet(); searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); if (searchCondition.searchOrder == spreadNS.Search.SearchOrder.zOrder) { searchCondition.findBeginRow = sheet.getActiveRowIndex(); searchCondition.findBeginColumn = sheet.getActiveColumnIndex() + 1; } else if (searchCondition.searchOrder == spreadNS.Search.SearchOrder.nOrder) { searchCondition.findBeginRow = sheet.getActiveRowIndex() + 1; searchCondition.findBeginColumn = sheet.getActiveColumnIndex(); } if ((searchCondition.searchFlags & spreadNS.Search.SearchFlags.blockRange) > 0) { var sel = sheet.getSelections()[0]; searchCondition.rowStart = sel.row; searchCondition.columnStart = sel.col; searchCondition.rowEnd = sel.row + sel.rowCount - 1; searchCondition.columnEnd = sel.col + sel.colCount - 1; } var searchResult = spread.search(searchCondition); return searchResult; } function getResultSearchinSheetBefore(searchCondition) { var sheet = spread.getActiveSheet(); searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); if ((searchCondition.searchFlags & spreadNS.Search.SearchFlags.blockRange) > 0) { var sel = sheet.getSelections()[0]; searchCondition.rowStart = sel.row; searchCondition.columnStart = sel.col; searchCondition.findBeginRow = sel.row; searchCondition.findBeginColumn = sel.col; searchCondition.rowEnd = sel.row + sel.rowCount - 1; searchCondition.columnEnd = sel.col + sel.colCount - 1; } else { searchCondition.rowStart = -1; searchCondition.columnStart = -1; searchCondition.findBeginRow = -1; searchCondition.findBeginColumn = -1; searchCondition.rowEnd = sheet.getActiveRowIndex(); searchCondition.columnEnd = sheet.getActiveColumnIndex(); } var searchResult = spread.search(searchCondition); return searchResult; } function getResultSearchinWorkbookEnd(searchCondition) { searchCondition.rowStart = -1; searchCondition.columnStart = -1; searchCondition.findBeginRow = -1; searchCondition.findBeginColumn = -1; searchCondition.rowEnd = -1; searchCondition.columnEnd = -1; searchCondition.startSheetIndex = spread.getActiveSheetIndex() + 1; searchCondition.endSheetIndex = -1; var searchResult = spread.search(searchCondition); return searchResult; } function getResultSearchinWorkbookBefore(searchCondition) { searchCondition.rowStart = -1; searchCondition.columnStart = -1; searchCondition.findBeginRow = -1; searchCondition.findBeginColumn = -1; searchCondition.rowEnd = -1; searchCondition.columnEnd = -1; searchCondition.startSheetIndex = -1 searchCondition.endSheetIndex = spread.getActiveSheetIndex() - 1; var searchResult = spread.search(searchCondition); return searchResult; } function getSearchCondition() { var searchCondition = new spreadNS.Search.SearchCondition(); var findWhat = document.getElementById('txtSearchWhat').value; var within = document.getElementById('searchWithin').value; var order = document.getElementById('searchOrder').value; var lookin = document.getElementById('searchLookin').value; var matchCase = document.getElementById('chkSearchMachCase').checked; var matchEntire = document.getElementById('chkSearchMachEntire').checked; var useWildCards = document.getElementById('chkSearchUseWildCards').checked; searchCondition.searchString = findWhat; if (within == "sheet") { searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); } if (order == "norder") { searchCondition.searchOrder = spreadNS.Search.SearchOrder.nOrder; } else { searchCondition.searchOrder = spreadNS.Search.SearchOrder.zOrder; } if (lookin == "formula") { searchCondition.searchTarget = spreadNS.Search.SearchFoundFlags.cellFormula; } else { searchCondition.searchTarget = spreadNS.Search.SearchFoundFlags.cellText; } if (!matchCase) { searchCondition.searchFlags |= spreadNS.Search.SearchFlags.ignoreCase; } if (matchEntire) { searchCondition.searchFlags |= spreadNS.Search.SearchFlags.exactMatch; } if (useWildCards) { searchCondition.searchFlags |= spreadNS.Search.SearchFlags.useWildCards; } return searchCondition; }
<!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"> <p>以下のオプションを指定して、Spreadでの検索方法を指定します。</p> <div> <label>検索する文字列:</label> <input id="txtSearchWhat"/> </div> <div> <label>検索場所:</label> <select id="searchWithin"> <option value="sheet" selected>Sheet</option> <option value="workbook">Workbook</option> </select> <input id="chkSearchMachCase" type="checkbox" /> <label for="chkSearchMachCase">大文字と小文字の区別</label> </div> <div> <label>検索対象:</label> <select id="searchLookin"> <option value="value" selected>Values</option> <option value="formula">Formulas</option> </select> <input id="chkSearchMachEntire" type="checkbox" /> <label for="chkSearchMachEntire">完全一致</label> </div> <div> <label>検索:</label> <select id="searchOrder"> <option value="zorder" selected>行方向</option> <option value="norder">列方向</option> </select> <div> <input id="chkSearchUseWildCards" type="checkbox" /> <label for="chkSearchUseWildCards">ワイルドカードを使用</label> </div> </div> <div> <label></label> <input id="btnFindNext" type="button" value="次を検索" /> </div> </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; } label { display: inline-block; margin: 8px 0 6px; } input[type="checkbox"] { margin: 6px 0; width: auto; } input, select { padding: 4px 6px; width: 100%; box-sizing: border-box; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }