1. 概述
1.1 預期效果
鼠标懸停在表格某一列中任意單元格上，便會顯示設置好的圖片，鼠标離開該單元格，圖片消失。如下圖所示：
1.2 實現思路
引用 CSS 磁盤文件和 JavaScript 磁盤文件，在一個 Tooltip 功能裏面（浮動提示框效果）放置當前單元格要顯示的圖片，實現懸停單元格便顯示圖片的效果。
2. 示例
2.1 準備模板
1）準備内置模板： %FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\函數實現動态列.cpt
點擊可下載模板：函數實現動态列.cpt
打開模板，模板樣式如下圖所示，該模板中使用的公式可參考 ：使用函數實現動态列
2）删除 A1 單元格所在的空白行，然後在參數面板中選中「下拉複選框」，輸入控件值，公式爲TABLEDATAFIELDS("ds1")。如下圖所示：
2.2 引用文件
點擊模板>模板Web屬性，在「引用 Css」文件和「引用JavaScript」文件 Tab 頁下，分别引用 bootstramp 的 js 和 css 文件。如下圖所示：
| 引用文件 | 本地路徑 |
|---|---|
| bootstrap.min.css | %FR_HOME%\webapps\webroot\scripts\css\lib\bootstrap.min |
| bootstrap.min.js | %FR_HOME%\webapps\webroot\scripts\js\lib\bootstrap.min |
2.3 添加事件
點擊模板>模板Web屬性>分頁預覽設置，在事件設置中添加「加載結束」事件，如下圖所示：
JavaScript 代碼如下：
//假設在E列做懸停顯示圖片，圖片的地址是固定url+xxx.jpg。
$(".x-table td[id^=E]").tooltip({
placement: "right",
html: true,
title: function() {
var goodsno = $(this).html();//獲取當前單據元的值
return '<img width=180 height=250 src="https://help.finereport.com/view/help2017/images/xiaofan.png" />';
//若圖片地址是固定地址url+xxx.png/.jpg
//return '<img width=180 height=250 src="https://help.finereport.com/view/help2017/images/'+goodsno +'.png" />';
}
});//如果需要按照參數顯示圖片 需要删除html格式 如果引用 css樣式表 ,參數欄顯示會有問題。
var src1 = goodsno.replace(/<\/?.+?>/g, "").replace(/ /g, "").replace(/\s+/g, ""); //剔除格式，保留數值
return '<img width=280 height=250 src="../../help/picture/' + src1 + '.jpg"/ >';
2.4 效果預覽
保存模板，點擊分頁預覽，效果如下圖所示：
注：不支持移動端。
3.模板下載
已完成的模板，可參見：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\懸停單元格顯示圖片.cpt
點擊下載模板：懸停單元格顯示圖片.cpt
