请选择 进入手机版 | 继续访问电脑版
 找回密码
 立即注册

QQ登录

只需一步,快速开始

Lynn.Dou 讲师达人认证 悬赏达人认证 SpreadJS 开发认证
超级版主   /  发表于:2021-10-25 17:47  /   查看:2190  /  回复:0
本帖最后由 Lynn.Dou 于 2021-10-25 17:49 编辑

提及 hover提示需求,数据Excel的小伙伴可能第一会想到 批注,即如下: image.png188796996.png

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


附件为此需求示例demo,主要代码如下:

  1. function TipCellType() {

  2.         }
  3.         TipCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();

  4.         TipCellType.prototype.getHitInfo = function(x, y, cellStyle, cellRect, context) {
  5.             return {
  6.                 x: x,
  7.                 y: y,
  8.                 row: context.row,
  9.                 col: context.col,
  10.                 cellStyle: cellStyle,
  11.                 cellRect: cellRect,
  12.                 sheetArea: context.sheetArea
  13.             };
  14.         }
  15.         TipCellType.prototype.processMouseEnter = function(hitinfo) {
  16.             if (!this._toolTipElement) {
  17.                 var div = document.createElement("div");
  18.                 $(div).css("position", "absolute")
  19.                     .css("border", "1px #C0C0C0 solid")
  20.                     .css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
  21.                     .css("font", "9pt Arial")
  22.                     .css("background", "white")
  23.                     .css("padding", 5);

  24.                 this._toolTipElement = div;
  25.             }
  26.             $(this._toolTipElement).text("Cell [R:" + hitinfo.row + "] : [C:" + hitinfo.col + "]")
  27.                 .css("top", hitinfo.y + 15)
  28.                 .css("left", hitinfo.x + 15);
  29.             $(this._toolTipElement).hide();
  30.             document.body.insertBefore(this._toolTipElement, null);
  31.             $(this._toolTipElement).show("fast");
  32.         };
  33.         TipCellType.prototype.processMouseLeave = function(hitinfo) {
  34.             if (this._toolTipElement) {
  35.                 document.body.removeChild(this._toolTipElement);
  36.                 this._toolTipElement = null;
  37.             }
  38.         };
复制代码
  1. // 给列头单元格设置此单元格类型
  2. sheet.setCellType(0, -1, new TipCellType(), GC.Spread.Sheets.SheetArea.colHeader);
复制代码
最终效果图如下:
image.png375207518.png

完整代码请参考附件demo。

tipCell (1).html

4.47 KB, 下载次数: 41

0 个回复

您需要登录后才可以回帖 登录 | 立即注册
返回顶部