SpreadJS 单元格修改指针样式

本文介绍如何在鼠标移动至单元格后修改指针的样式。

在自定义单元格示例中我们看到了如何通过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

关于葡萄城

葡萄城是专业的软件开发技术和低代码平台提供商，以“赋能开发者”为使命，致力于通过表格控件、低代码和BI等各类软件开发工具和服务，一站式满足开发者需求，帮助企业提升开发效率并创新开发模式。葡萄城开发技术始于1980年，40余年来始终聚焦软件开发技术，有深厚的技术积累和丰富的产品线。是业界能够同时赋能软件开发和低代码开发的企业。凭借过硬的产品能力、活跃的开发者社区和丰富的伙伴生态，与超过3000家合作伙伴紧密合作，产品广泛应用于信息和软件服务、制造、交通运输、建筑、金融、能源、教育、公共管理等支柱产业。