历史版本2 :JS实现鼠标悬停显示图片 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 概述编辑

1.1 预期效果

鼠标悬停在表格某一列中任意单元格上,便会显示设置好的图片,鼠标离开该单元格,图片消失。如下图所示:

88.gif


1.2 实现思路

引用 CSS 磁盘文件和 JavaScript 磁盘文件,在一个 Tooltip 功能里面(浮动提示框效果)放置当前单元格要显示的图片,实现悬停单元格便显示图片的效果。

2. 操所步骤编辑

2.1 模板准备

打开 %FR_HOME%\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\函数实现动态列.cpt 模板,该模板中使用的公式可参考 使用函数实现动态列

首先删除 A1 单元格所在的空白行,然后在参数面板中选中「下拉复选框」,输入控件值,公式为TABLEDATAFIELDS("ds1")。如下图所示:

1571369643318556.png

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

如下图所示:

1571377549475288.png

2.3 添加加载结束事件

点击模板>模板Web属性>分页预览设置,在事件设置中添加「加载结束」事件,如下图所示:

1571378124187551.png

JS 代码如下所示:

//假设在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="http://help.finereport.com/view/help2017/images/xiaofan.png" />';
//若图片地址是固定地址url+xxx.png/.jpg
//return '<img width=180 height=250 src="http://help.finereport.com/view/help2017/images/'+goodsno +'.png" />';
}
});

2.4 效果预览

保存模板,点击分页预览,效果与本文中1.1章「预期结果」中相同。

3.模板下载编辑

已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Parameter\DynamicCol\悬停单元格显示图片.cpt

点击下载模板:悬停单元格显示图片.cpt