JS實現懸停儲存格顯示圖片

1.1 版本

1.2 預期效果

滑鼠懸停在表格某一欄中任意儲存格上，便會顯示設定好的圖片，滑鼠離開該儲存格，圖片消失。如下圖所示：

1.3 實現思路

實現方法：使用 JS 程式碼新增載入結束事件，設定當滑鼠懸浮指定儲存格時，出現提示。

11.0.10 之前版本儲存格提示 JS API，請參見：設定儲存格提示API

11.0.10 及之後版本儲存格提示 JS API，請參見：

• 修改所有儲存格樣式參考：表格物件API

• 修改行列儲存格樣式參考：表格列欄物件API

• 修改某單一樣式參考：儲存格物件API

2.1 準備範本

建立範本，SQL語句為：SELECT * FROM [銷量]，表格設計如下圖所示：

2.2 新增事件

1）11.0.10 之前版本，點選「範本>範本Web屬性>分頁預覽設定」，在事件設定中新增「載入結束」事件。如下圖所示：

JavaScript 程式碼如下：

_g().addEffect('showTooltip', {
    address: "A2",
    image:"https://www.fanruan.com/images/logo-fanruan.png"
});

2）11.0.10 及之後版本，點選「範本>範本Web屬性>分頁預覽設定」，在事件設定中新增「載入結束」事件。如下圖所示：

JavaScript 程式碼如下：

_g().getColumn(1).showToolTip({
	show: true, // 是否會出現彈窗
	content: { // 可選欄位，不指定即為顯示文字，內容為cell.getValue();
		image: "https://www.fanruan.com/images/logo-fanruan.png",
	}
});

2.3 效果预览

保存模板，点击「分页预览」，鼠标悬浮 A2 单元格显示图片，效果如 1.2 节所示。

注：不支持移动端。

11.0.10 之前版本，点击下载模板：懸停儲存格顯示圖片.cpt

11.0.10 及之后版本，点击下载模板：懸浮顯示圖片.cpt