Derrick.Jiao 发表于 2021-9-10 09:28:01

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

本帖最后由 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

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

MOODE 发表于 2022-8-24 11:54:41

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

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

爱迪生 发表于 2022-8-24 14:06:44

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

目前整列都是SortHearderCellType类型的单元格,只要鼠标移入,都会重绘,而且都会满足this._mouseEnter = true
,解决方法就是将重绘的flag放在单元格信息上,参考附件
页: [1]
查看完整版本: 利用自定义单元格实现鼠标悬浮图标