历史版本1 :JS实现鼠标悬停显示图片 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 前言+效果图编辑
在一个有货品的大堆数据里，用户想看某个货品的图片（清晰的），要是在列表在加一列放置货品图片，那就会 加载慢，看不清，显得列表数据更繁多.所以 就想是一个tooltip功能里面放置 当前行的货品的图片，鼠标一悬停就显示 图片，移开就 没了，多方便哪是吧
我这里实现的是在货号 一列实现悬停。效果图：
2.实现编辑
第一步：我看了下finereport下的安装路径的 X:\FineBI\webapps\WebReport\scripts 下竟然放置着bootstramp的js和css文件，那这就不用俺另外搞了。
打开report设计工具，点击模板-模板web属性，在引用css和引用js里分别引入放置在服务器的bootstramp的css和js文件。如下图：
第二步：在分页预览设置中为当前模板添加加载结束事件，
第三步：写加载结束事件里的js代码
我的情况比较麻烦，这个报表的列全是动态的，所以比较复杂，我写个固定列的demo贴上来：
//假设你的货号列是E列，我的图片是固定url+货号，可外网访问的。这里我就放个共用的默认图片吧。如果是 ftp路径那我还真不知咋整
$(".x-table td[id^=E]").tooltip({
placement: "right",
html: true,
title: function() {
var goodsno = $(this).html();
return '<img width=180 height=250 src="/uploads/201810/20181022165252_3704.png" />';
}
});