利用自定义单元格实现鼠标悬浮图标

收藏

本帖最后由 Derrick.Jiao 于 2021-9-10 09:33 编辑

在前面我们实现了单元格绘制图标，若上次没有了解过的小伙伴可以到下方链接了解一下。
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=93415

有小伙伴想要在单元格悬浮的时候，显示自定义的icon，那么本次我们来实现鼠标悬浮出现图标的自定义单元格，我们先来看下具体效果。
hover.gif75409850.png

要实现鼠标悬浮和离开的效果，就需要用到processMouseEnter和processMouseLeave两个方法，前者是处理鼠标移入的方法，后者是处理鼠标移出的方法。我们来看下具体如何实现。

为了让我们创建的自定义单元格可以编辑，我们将记成Text这个cellType。

function SortHearderCellType() { }
SortHearderCellType.prototype = new spreadNS.CellTypes.Text();

复制代码

接着我们在paint方法里进行图标的绘制，并且创建一个flag，需要绘制时，将这个flag置为true；不需要时，将这个flag置为false。

SortHearderCellType.prototype.paint = function (ctx, value, x, y, width, height, style, context) {
spreadNS.CellTypes.Text.prototype.paint.apply(this, arguments);
if (this._mouseEnter) {
style.backgroundImage = src;
x = x + width / 2 + 70 / 2;
y = y + (height - 16) / 2;
width = 16;
height = 16;
value = "";
spreadNS.CellTypes.Text.prototype.paint.apply(this, arguments);
}
}

复制代码

最后，到我们最关键的鼠标移入移出的逻辑了，其实两者都比较简单而且逻辑基本一致，只需将我们上面说的flag进行修改即可。修改完成后，别忘了要调用repaint将表单重绘刷新一下。

//鼠标移动
SortHearderCellType.prototype.processMouseEnter = function (hitInfo) {
this._mouseEnter = true;
var sheet = hitInfo.sheet;
sheet.repaint(new GC.Spread.Sheets.Rect(hitInfo.cellRect.x, hitInfo.cellRect.y, hitInfo.cellRect.width, hitInfo.cellRect.height));
}
//鼠标离开
SortHearderCellType.prototype.processMouseLeave = function (hitInfo) {
this._mouseEnter = false;
var sheet = hitInfo.sheet;
sheet.repaint(new GC.Spread.Sheets.Rect(hitInfo.cellRect.x, hitInfo.cellRect.y, hitInfo.cellRect.width, hitInfo.cellRect.height));
}

复制代码

接着，需要在哪里使用就给哪个单元格设置这个cellType即可。怎么样？明白了吗？？学“废”了吗？

另外，如需悬浮单元格出现自定义的div，可以参考下面的链接
https://demo.grapecity.com.cn/Sp ... ple/#/demos/tipCell

关于这篇文章的代码放在附件啦，下载即可体验自定义单元格这项“黑科技”。

MOODE · MOODE

你好，spreadjs在bindColumns时候使用的是单例模式，会导致在实例内部的数据共享，paint的时候会出问题。

具体问题可以看附件，想问一下有没有解决方案

爱迪生 · 爱迪生

MOODE 发表于 2022-8-24 11:54
你好，spreadjs在bindColumns时候使用的是单例模式，会导致在实例内部的数据共享，paint的时候会出问题。
...

目前整列都是SortHearderCellType类型的单元格，只要鼠标移入，都会重绘，而且都会满足this._mouseEnter = true
，解决方法就是将重绘的flag放在单元格信息上，参考附件

		自动登录	找回密码
密码			立即注册

利用自定义单元格实现鼠标悬浮图标

2 个回复

SpreadJS 高级认证

讲师达人

GrapeCity

悬赏达人

SpreadJS 认证