SpreadJS之实现行列头hover提示
本帖最后由 Lynn.Dou 于 2021-10-25 17:49 编辑提及 hover提示需求，数据Excel的小伙伴可能第一会想到 批注，即如下：
当然学习使用SpreadJS的小伙伴，也了解到SpreadJS提供了自定义单元格类型功能，
可以实现hover提示的需求。
有小伙伴疑问，对于行/列头单元格，能否实现上述功能呢？
批注是不支持的，SJS在设计上与Excel保持一致，仅支持 在表单视图区域内单元格 设置批注。
不过SpreadJS支持行列头自定义单元格，所以可以借此实现 行列头hover提示 的需求：
具体可以参考学习指南：
https://demo.grapecity.com.cn/spreadjs/SpreadJSTutorial/features/cells/cell-types/custom-header/purejs
附件为此需求示例demo，主要代码如下：
function TipCellType() {
}
TipCellType.prototype = new GC.Spread.Sheets.CellTypes.Text();
TipCellType.prototype.getHitInfo = function(x, y, cellStyle, cellRect, context) {
return {
x: x,
y: y,
row: context.row,
col: context.col,
cellStyle: cellStyle,
cellRect: cellRect,
sheetArea: context.sheetArea
};
}
TipCellType.prototype.processMouseEnter = function(hitinfo) {
if (!this._toolTipElement) {
var div = document.createElement("div");
$(div).css("position", "absolute")
.css("border", "1px #C0C0C0 solid")
.css("box-shadow", "1px 2px 5px rgba(0,0,0,0.4)")
.css("font", "9pt Arial")
.css("background", "white")
.css("padding", 5);
this._toolTipElement = div;
}
$(this._toolTipElement).text("Cell : ")
.css("top", hitinfo.y + 15)
.css("left", hitinfo.x + 15);
$(this._toolTipElement).hide();
document.body.insertBefore(this._toolTipElement, null);
$(this._toolTipElement).show("fast");
};
TipCellType.prototype.processMouseLeave = function(hitinfo) {
if (this._toolTipElement) {
document.body.removeChild(this._toolTipElement);
this._toolTipElement = null;
}
};// 给列头单元格设置此单元格类型
sheet.setCellType(0, -1, new TipCellType(), GC.Spread.Sheets.SheetArea.colHeader);最终效果图如下：
完整代码请参考附件demo。
页:
[1]