命中测试

此示例显示如何使用hitTest函数获取工作簿中的指定命中区域。

在Spread.Sheets中,一个 Workbook 包含五块区域:worksheet, sheetTab, horizontalScrollbar, verticalScrollbar, footerCorner 通过 workbook 的 hitTest 方法,你可以从 workbook 的坐标系统中得到特定的区域。 下表包含了不同的命中区域以及它们的子区域。 Workbook 区域 点击区域 worksheet corner, rowHeader, colHeader, viewport sheetTab prevArrow, nextArrow, sheetName, blank, resize horizontalScrollbar leftButton, rightButton, thumbButton, trackButton verticalScrollbar upButton, downButton, thumbButton, trackButton footerCorner footerCorner
window.onload = function () { var spread = new GC.Spread.Sheets.Workbook(document.getElementById("ss"), {sheetCount: 1}); 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 name="spreadjs culture" content="zh-cn" /> <meta charset="utf-8" /> <meta name="viewport" content="width=device-width, initial-scale=1.0" /> <link rel="stylesheet" type="text/css" href="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/styles/gc.spread.sheets.excel2013white.css"> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets/dist/gc.spread.sheets.all.min.js" type="text/javascript"></script> <script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity/spread-sheets-resources-zh/dist/gc.spread.sheets.resources.zh.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; }