本文介绍如何在鼠标移动至单元格后修改指针的样式。
在自定义单元格示例中我们看到了如何通过processMouseUp处理鼠标事件, 同样我们也可以使用processMouseUp来处理鼠标在单元格中的移动事件。
下面的代码演示了当鼠标移动进入五角星区域后,鼠标指针由default变成help状态。
FivePointedStarCellType.prototype.processMouseMove = function(hitInfo) {var sheet = hitInfo.sheet;
var div = sheet.getParent().getHost()
var canvas = $('canvas[rendermethod ]', div)[0];
if (sheet && hitInfo.isReservedLocation) {
canvas.style.cursor = 'help';return true;} else {
canvas.style.cursor = 'default';
}return false;};
代码十分简单,需要注意的是Spread的是用Canvas绘制的,所以改变鼠标样式是需要改变canvas的样式,除了代码中通过getHost的方式获取。我们也可以使用id这种更加直接的方式获取,canvas的id是容器id加上vp_vp。例如如果容器id为ss,则canvas的id就是ssvp_vp,然后我们直接给ssvp_vp设置style即可。
document.getElementById("ssvp_vp").style.cursor='wait';
示例演示地址:http://runjs.cn/detail/a7dsqtym
更多资源
SpreadJS中文学习指南:http://demo.grapecity.com.cn/SpreadJS/TutorialSample/#/samples
SpreadJS在线英文产品文档:http://sphelp.grapecity.com/webhelp/SpreadJSWeb/webframe.html#welcome.html
如果您对SpreadJS产品感兴趣,可以到官方网站下载试用:/developer/spreadjs
如果你有疑问,可以到GCDN论坛获得技术支持:http://gcdn.grapecity.com.cn