利用自定义单元格实现鼠标悬浮图标
本帖最后由 Derrick.Jiao 于 2021-9-10 09:33 编辑在前面我们实现了单元格绘制图标,若上次没有了解过的小伙伴可以到下方链接了解一下。
https://gcdn.grapecity.com.cn/forum.php?mod=viewthread&tid=93415
有小伙伴想要在单元格悬浮的时候,显示自定义的icon,那么本次我们来实现鼠标悬浮出现图标的自定义单元格,我们先来看下具体效果。
要实现鼠标悬浮和离开的效果,就需要用到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即可。怎么样?明白了吗??学“废”了吗?:bt^j:
另外,如需悬浮单元格出现自定义的div,可以参考下面的链接
https://demo.grapecity.com.cn/SpreadJS/cdn/extendedExample/#/demos/tipCell
关于这篇文章的代码放在附件啦,下载即可体验自定义单元格这项“黑科技”。
你好,spreadjs在bindColumns时候使用的是单例模式,会导致在实例内部的数据共享,paint的时候会出问题。
具体问题可以看附件,想问一下有没有解决方案
MOODE 发表于 2022-8-24 11:54
你好,spreadjs在bindColumns时候使用的是单例模式,会导致在实例内部的数据共享,paint的时候会出问题。
...
目前整列都是SortHearderCellType类型的单元格,只要鼠标移入,都会重绘,而且都会满足this._mouseEnter = true
,解决方法就是将重绘的flag放在单元格信息上,参考附件
页:
[1]