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.
<template> <div class="sample-tutorial"> <gc-spread-sheets class="sample-spreadsheets" @workbookInitialized="initSpread"> <gc-worksheet></gc-worksheet> <gc-worksheet></gc-worksheet> <gc-worksheet></gc-worksheet> </gc-spread-sheets> <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" @change="changeTxtSearchWhat"/> </div> <div> <label>Within:</label> <select id="searchWithin" @change="changeSearchWithin"> <option value="sheet" selected>Sheet</option> <option value="workbook">Workbook</option> </select> <input id="chkSearchMachCase" type="checkbox" @change="changeChkSearchMachCase"/> <label for="chkSearchMachCase">Match case</label> </div> <div> <label>Look in:</label> <select id="searchLookin" @change="changeSearchLookin"> <option value="value" selected>Values</option> <option value="formula">Formulas</option> </select> <input id="chkSearchMachEntire" type="checkbox" @change="changeChkSearchMachEntire"/> <label for="chkSearchMachEntire">Match exactly</label> </div> <div> <label>Search:</label> <select id="searchOrder" @change="changeSearchOrder"> <option value="byRows" selected>By Rows</option> <option value="byColumns">By Columns</option> </select> <div> <input id="chkSearchUseWildCards" type="checkbox" @change="changeChkSearchUseWildCards"/> <label for="chkSearchUseWildCards">Use wildcards</label> </div> </div> <div> <label></label> <input id="btnFindNext" type="button" value="Find Next" @click="findNext"/> </div> </div> </div> </template> <script> import Vue from "vue"; import "@grapecity/spread-sheets-vue"; import GC from "@grapecity/spread-sheets"; import "./styles.css"; let App = Vue.extend({ name: "app", data: function () { return { spread: null, txtSearchWhat: "", searchWithin: "sheet", searchOrder: "byRows", searchLookin: "value", chkSearchMachCase: false, chkSearchMachEntire: false, chkSearchUseWildCards: false }; }, methods: { initSpread: function (spread) { this.spread = spread; spread.suspendPaint(); let 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)'); let 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)'); spread.resumePaint(); }, changeTxtSearchWhat(e) { this.txtSearchWhat = e.target.value; }, changeSearchWithin(e) { this.searchWithin = e.target.value; }, changeSearchOrder(e) { this.searchOrder = e.target.value; }, changeSearchLookin(e) { this.searchLookin = e.target.value; }, changeChkSearchMachCase(e) { this.chkSearchMachCase = e.target.checked; }, changeChkSearchMachEntire(e) { this.chkSearchMachEntire = e.target.checked; }, changeChkSearchUseWildCards(e) { this.chkSearchUseWildCards = e.target.checked; }, findNext(e) { let spread = this.spread; let sheet = spread.getActiveSheet(); let searchCondition = this.getSearchCondition(spread); let within = this.searchWithin; let searchResult = null; if (within == "sheet") { let sels = sheet.getSelections(); if (sels.length > 1) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.blockRange; } else if (sels.length == 1) { let spanInfo = this.getSpanInfo(sheet, sels[0].row, sels[0].col); if (sels[0].rowCount != spanInfo.rowSpan && sels[0].colCount != spanInfo.colSpan) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.blockRange; } } searchResult = this.getResultSearchinSheetEnd(spread, searchCondition); if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = this.getResultSearchinSheetBefore(spread, searchCondition); } } else if (within == "workbook") { searchResult = this.getResultSearchinSheetEnd(spread, searchCondition); if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = this.getResultSearchinWorkbookEnd(spread, searchCondition); } if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = this.getResultSearchinWorkbookBefore(spread, searchCondition); } if (searchResult == null || searchResult.searchFoundFlag == GC.Spread.Sheets.Search.SearchFoundFlags.none) { searchResult = this.getResultSearchinSheetBefore(spread, searchCondition); } } if (searchResult != null && searchResult.searchFoundFlag != GC.Spread.Sheets.Search.SearchFoundFlags.none) { spread.setActiveSheetIndex(searchResult.foundSheetIndex); let sheet = spread.getActiveSheet(); sheet.setActiveCell(searchResult.foundRowIndex, searchResult.foundColumnIndex); if ((searchCondition.searchFlags & GC.Spread.Sheets.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, GC.Spread.Sheets.VerticalPosition.center, GC.Spread.Sheets.HorizontalPosition.center); } else { sheet.repaint(); } } else { //Not Found alert('Not Found'); } }, getSpanInfo(sheet, row, col) { let span = sheet.getSpans(new GC.Spread.Sheets.Range(row, col, 1, 1)); if (span.length > 0) { return { rowSpan: span[0].rowCount, colSpan: span[0].colCount }; } else { return { rowSpan: 1, colSpan: 1 }; } }, getResultSearchinSheetEnd(spread, searchCondition) { let sheet = spread.getActiveSheet(); searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); if (searchCondition.searchOrder == GC.Spread.Sheets.Search.SearchOrder.zOrder) { searchCondition.findBeginRow = sheet.getActiveRowIndex(); searchCondition.findBeginColumn = sheet.getActiveColumnIndex() + 1; } else if (searchCondition.searchOrder == GC.Spread.Sheets.Search.SearchOrder.nOrder) { searchCondition.findBeginRow = sheet.getActiveRowIndex() + 1; searchCondition.findBeginColumn = sheet.getActiveColumnIndex(); } if ((searchCondition.searchFlags & GC.Spread.Sheets.Search.SearchFlags.blockRange) > 0) { let 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; } let searchResult = spread.search(searchCondition); return searchResult; }, getResultSearchinSheetBefore(spread, searchCondition) { let sheet = spread.getActiveSheet(); searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); if ((searchCondition.searchFlags & GC.Spread.Sheets.Search.SearchFlags.blockRange) > 0) { let 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(); } let searchResult = spread.search(searchCondition); return searchResult; }, getResultSearchinWorkbookEnd(spread, 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; let searchResult = spread.search(searchCondition); return searchResult; }, getResultSearchinWorkbookBefore(spread, 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; let searchResult = spread.search(searchCondition); return searchResult; }, getSearchCondition(spread) { let searchCondition = new GC.Spread.Sheets.Search.SearchCondition(); let findWhat = this.txtSearchWhat; let within = this.searchWithin; let order = this.searchOrder; let lookin = this.searchLookin; let matchCase = this.chkSearchMachCase; let matchEntire = this.chkSearchMachEntire; let useWildCards = this.chkSearchUseWildCards; searchCondition.searchString = findWhat; if (within == "sheet") { searchCondition.startSheetIndex = spread.getActiveSheetIndex(); searchCondition.endSheetIndex = spread.getActiveSheetIndex(); } if (order == "byRows") { searchCondition.searchOrder = GC.Spread.Sheets.Search.SearchOrder.zOrder; } else { searchCondition.searchOrder = GC.Spread.Sheets.Search.SearchOrder.nOrder; } if (lookin == "formula") { searchCondition.searchTarget = GC.Spread.Sheets.Search.SearchFoundFlags.cellFormula; } else { searchCondition.searchTarget = GC.Spread.Sheets.Search.SearchFoundFlags.cellText; } if (!matchCase) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.ignoreCase; } if (matchEntire) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.exactMatch; } if (useWildCards) { searchCondition.searchFlags |= GC.Spread.Sheets.Search.SearchFlags.useWildCards; } return searchCondition; } } }); new Vue({ render: h => h(App) }).$mount("#app"); </script>
<!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/vue/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <!-- SystemJS --> <script src="$DEMOROOT$/en/vue/node_modules/systemjs/dist/system.src.js"></script> <script src="systemjs.config.js"></script> <script> System.import('./src/app.vue'); System.import('$DEMOROOT$/en/lib/vue/license.js'); </script> </head> <body> <div id="app"></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; }
(function (global) { System.config({ transpiler: 'plugin-babel', babelOptions: { es2015: true }, meta: { '*.css': { loader: 'css' }, '*.vue': { loader: 'vue-loader' } }, paths: { // paths serve as alias 'npm:': 'node_modules/' }, // map tells the System loader where to look for things map: { '@grapecity/spread-sheets': 'npm:@grapecity/spread-sheets/index.js', '@grapecity/spread-sheets-vue': 'npm:@grapecity/spread-sheets-vue/index.js', '@grapecity/jsob-test-dependency-package/react-components': 'npm:@grapecity/jsob-test-dependency-package/react-components/index.js', 'jszip': 'npm:jszip/dist/jszip.js', 'css': 'npm:systemjs-plugin-css/css.js', 'vue': 'npm:vue/dist/vue.min.js', 'vue-loader': 'npm:systemjs-vue-browser/index.js', 'plugin-babel': 'npm:systemjs-plugin-babel/plugin-babel.js', 'systemjs-babel-build':'npm:systemjs-plugin-babel/systemjs-babel-browser.js' }, // packages tells the System loader how to load when no filename and/or no extension packages: { src: { defaultExtension: 'js' }, rxjs: { defaultExtension: 'js' }, "node_modules": { defaultExtension: 'js' } } }); })(this);