Overview

SpreadJS allows searching for content within the workbook, such as a particular number or text string.

To search for a specific text string or number, use the search method to search the text in cells with the specified criteria, as shown in the following example: Use the SearchCondition to customize the search parameters. The search result is an object with the following properties: searchFoundFlag: An enumeration that specifies what is matched. foundSheetIndex: The index of the sheet in which a match is found. foundRowIndex: The index of the row at which a match is found. foundColumnIndex: The index of the column at which a match is found. foundString: The found string.
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 == "byRows") { searchCondition.searchOrder = spreadNS.Search.SearchOrder.zOrder; } else { searchCondition.searchOrder = spreadNS.Search.SearchOrder.nOrder; } 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 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/@mescius/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@mescius/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"> <p>Use these options to specify what to search for in Spread.</p> <div> <label>Find what:</label> <input id="txtSearchWhat"/> </div> <div> <label>Within:</label> <select id="searchWithin"> <option value="sheet" selected>Sheet</option> <option value="workbook">Workbook</option> </select> <input id="chkSearchMachCase" type="checkbox" /> <label for="chkSearchMachCase">Match case</label> </div> <div> <label>Look in:</label> <select id="searchLookin"> <option value="value" selected>Values</option> <option value="formula">Formulas</option> </select> <input id="chkSearchMachEntire" type="checkbox" /> <label for="chkSearchMachEntire">Match exactly</label> </div> <div> <label>Search:</label> <select id="searchOrder"> <option value="byRows" selected>By Rows</option> <option value="byColumns">By Columns</option> </select> <div> <input id="chkSearchUseWildCards" type="checkbox" /> <label for="chkSearchUseWildCards">Use wildcards</label> </div> </div> <div> <label></label> <input id="btnFindNext" type="button" value="Find Next" /> </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; }