Hit Testing

This sample demonstrates using hitTest function to get a specified hit area in the workbook.

<p>In SpreadJS, a workbook consist of five hit test areas: <strong>worksheet</strong>, <strong>sheetTab</strong>, <strong>horizontalScrollbar</strong>, <strong>verticalScrollbar</strong> and <strong>footerCorner</strong></p> <p>The workbook's <strong>hitTest</strong> method returns specified hit area from any X and Y coordinates in the workbook.</p> <pre><code class="hljs">spread.hit<span class="hljs-constructor">Test(<span class="hljs-params">x</span>, <span class="hljs-params">y</span>)</span> </code></pre> <p>The following table shows the workbook’s different hit areas and their sub-areas:</p> <table border="1" style="border-collapse: collapse;width:50%;"> <tbody> <tr> <th style="width: 30%;">Workbook Area</th> <th>Click Area</th> </tr> <tr> <td>worksheet</td> <td>corner, rowHeader, colHeader, viewport</td> </tr> <tr> <td>sheetTab</td> <td>prevArrow, nextArrow, sheetName, blank, resize</td> </tr> <tr> <td>horizontalScrollbar</td> <td>leftButton, rightButton, thumbButton, trackButton</td> </tr> <tr> <td>verticalScrollbar</td> <td>upButton, downButton, thumbButton, trackButton</td> </tr> <tr> <td>footerCorner</td> <td>footerCorner</td> </tr> </tbody> </table>
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); //remove body margin document.getElementById("ss").parentNode.parentNode.style.margin = "0"; initFunction(spread); }; function initFunction(spread) { var sheet = spread.getActiveSheet(); spread.suspendPaint(); spread.getSheet(0).name("hitTest"); sheet.setColumnWidth(0, 150); sheet.setText(0, 0, "Click anywhere inside of this workbook."); spread.getHost().addEventListener('click', function(e){ var y = e.pageY - this.offsetTop; var x = e.pageX - this.offsetLeft; var result = spread.hitTest(x, y); var str = getHitAreaName(result); if (result) { document.getElementById("showEventArgs").value="(x: " + result.x.toString() + "," + " y:" + result.y.toString() + ")" + " ; " + str; } }); spread.resumePaint(); } function getHitAreaName(result){ if(result) { var str = ""; var worksheetHitInfo = result.worksheetHitInfo; var tabStripHitInfo = result.tabStripHitInfo; if (worksheetHitInfo) { var hitTestType = worksheetHitInfo.hitTestType; if (hitTestType === 0) { str = 'corner'; } else if (hitTestType === 1) { str = 'colHeader'; } else if (hitTestType === 2) { str = 'rowHeader'; } else { var row = worksheetHitInfo.row; var col = worksheetHitInfo.col; str = 'viewport; ' + '(row: ' + row + ', col: ' + col + ')'; } } else if (tabStripHitInfo) { if (tabStripHitInfo.navButton) { str = tabStripHitInfo.navButton; } else if (tabStripHitInfo.sheetTab) { str = tabStripHitInfo.sheetTab.sheetName; } else if (tabStripHitInfo.resize === true) { str = "resize"; } else { str = "blank"; } } else if (result.horizontalScrollBarHitInfo) { str = result.horizontalScrollBarHitInfo.element; } else if (result.verticalScrollBarHitInfo) { str = result.verticalScrollBarHitInfo.element; } else if (result.footerCornerHitInfo) { str = result.footerCornerHitInfo.element; } } return str; }
<!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/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/en/purejs/node_modules/@grapecity/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"> <div id="settingsDiv"> <br/> <label>This text box shows detailed information about the clicked area in the workbook.</label> <br/> <textarea id="showEventArgs" cols="85" rows="3" style="max-width: 98%"></textarea> </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; } .option-row { font-size: 14px; padding: 5px; margin-top: 10px; } label { display: block; margin-bottom: 6px; } input { padding: 4px 6px; } input[type=button] { margin-top: 6px; display: block; } body { position: absolute; top: 0; bottom: 0; left: 0; right: 0; }