在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});
//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 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-software/spread-sheets/styles/gc.spread.sheets.excel2013white.css">
<script src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/spread-sheets/dist/gc.spread.sheets.all.min.js"
type="text/javascript"></script>
<script
src="$DEMOROOT$/zh/purejs/node_modules/@grapecity-software/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;
}
