SpreadJS之实现行列头hover提示

提及 hover提示需求，数据Excel的小伙伴可能第一会想到 批注，即如下：

当然学习使用SpreadJS的小伙伴，也了解到SpreadJS提供了自定义单元格类型功能，
可以实现hover提示的需求。
有小伙伴疑问，对于行/列头单元格，能否实现上述功能呢？
批注是不支持的，SJS在设计上与Excel保持一致，仅支持 在表单视图区域内单元格 设置批注。
不过SpreadJS支持行列头自定义单元格，所以可以借此实现 行列头hover提示 的需求：
具体可以参考学习指南：
https://demo.grapecity.com.cn/sp ... ustom-header/purejs


附件为此需求示例demo，主要代码如下：

1. function TipCellType() {
   
2. 
   
3.         }
   
4.         TipCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
   
5. 
   
6.         TipCellType.prototype.getHitInfo = function(x, y, cellStyle, cellRect, context) {
   
7.             return {
   
8.                 x: x,
   
9.                 y: y,
   
10.                 row: context.row,
    
11.                 col: context.col,
    
12.                 cellStyle: cellStyle,
    
13.                 cellRect: cellRect,
    
14.                 sheetArea: context.sheetArea
    
15.             };
    
16.         }
    
17.         TipCellType.prototype.processMouseEnter = function(hitinfo) {
    
18.             if (!this._toolTipElement) {
    
19.                 var div = document.createElement("div");
    
20.                 $(div).css("position", "absolute")
    
21.                     .css("border", "1px #C0C0C0 solid")
    
22.                     .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
    
23.                     .css("font", "9pt Arial")
    
24.                     .css("background", "white")
    
25.                     .css("padding", 5);
    
26. 
    
27.                 this._toolTipElement = div;
    
28.             }
    
29.             $(this._toolTipElement).text("Cell [R:" + hitinfo.row + "] : [C:" + hitinfo.col + "]")
    
30.                 .css("top", hitinfo.y + 15)
    
31.                 .css("left", hitinfo.x + 15);
    
32.             $(this._toolTipElement).hide();
    
33.             document.body.insertBefore(this._toolTipElement, null);
    
34.             $(this._toolTipElement).show("fast");
    
35.         };
    
36.         TipCellType.prototype.processMouseLeave = function(hitinfo) {
    
37.             if (this._toolTipElement) {
    
38.                 document.body.removeChild(this._toolTipElement);
    
39.                 this._toolTipElement = null;
    
40.             }
    
41.         };

复制代码

1. // 给列头单元格设置此单元格类型
   
2. sheet.setCellType(0, -1, new TipCellType(), GC.Spread.Sheets.SheetArea.colHeader);

复制代码

最终效果图如下：


完整代码请参考附件demo。