在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, "点击此工作簿中的任意位置。");
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 = '角落';
} else if (hitTestType === 1) {
str = '列标题';
} else if (hitTestType === 2) {
str = '行标题';
} else {
var row = worksheetHitInfo.row;
var col = worksheetHitInfo.col;
str = '视口; ' + '(行: ' + row + ', 列: ' + col + ')';
}
} else if (tabStripHitInfo) {
if (tabStripHitInfo.navButton) {
str = tabStripHitInfo.navButton;
} else if (tabStripHitInfo.sheetTab) {
str = tabStripHitInfo.sheetTab.sheetName;
} else if (tabStripHitInfo.resize === true) {
str = "调整大小";
} else {
str = "空白";
}
} 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>此文本框显示工作簿中点击区域的详细信息。</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;
}
