JS实现对控件点击显示或悬浮显示自定义内容-FineReport Help Document

1. 概述

1.1 预期效果

在实际场景中，我们可以对于单元格内容使用内容提示，通过显示title的方法来显示自定义内容。

但是:

没有点击提示(点击目标控件显示，点击其他任意位置，移除)，只有悬浮提示；
局限于单元格，无法迁移到 参数面板上的控件 使用

于是，本文提供一个方法：对参数面板上控件点击或者悬浮，显示自定义内容（可具备一定的样式），效果如下：

点击或者悬浮提示.gif

1.2 实现思路

思路拆分：

通过js给页面增加一个div元素，这个div元素中可以写入内容，通过css控制样式显示，再通过点击事件或者鼠标移入移出事件来触发显示这个元素或者移除这个元素的效果。
提示内容的位置，通过获取目标控件的位置(x,y),进行一定的像素偏移，定位我们需要的提示的位置；
点击目标区域(目标控件)提示，点击其他位置，移除提示，则通过点击body移除div元素（阻止冒泡事件）来完成。

2. 示例

2.1 模板设计

这里是使用 cpt模板 的 参数面板 上的 label控件， 进行示例。

步骤如下：

新建普通报表：拖入label控件到参数面板，命名label0，控件值中写入字符串"点击提示"；再拖入一个label1，命名label1，控件值写入字符串"悬浮提示"；
将以下js写入到参数面板的初始化事件中：
```
setTimeout(function(){

$("[widgetname='LABEL0']").click(function(e){
var x = 10;
var y = 20;
var z = "dadfafasfsalakj<br />kalfasjdkfsafkjasfas" //这里写我们想要放置的内容
$("#preview").remove();// 防止点击第二次
$("body").append("<div id='preview'>"+z+"</div>");//弹出一个div里面放着内容
$("#preview")//修改这个div的样式
.css("position","absolute")
.css("z-index","9999999")
.css("left",(e.pageX + x + 'px')) //调整这个div出现的水平方向位置
.css("top",(e.pageY - y + 'px'))  //调整这个div出现的垂直方向位置
.css("padding","4px")
.css("border","1px solid pink")
.css("border-radius","4px")
.css("background-color","skyblue")
.css("font-size","14px")
.css("font-famliy","微软雅黑")
.css("color","blue")
e.stopPropagation(); //阻止冒泡事件
});

$("body").click(function(e){
$("#preview").remove();
})

},100);
```
①简单说明一下： z = "1.dadfafasfsalakj<br />2.kalfasjdkfsafkjasfas" 即为我们需要添加为自定义内容提示的内容，可以看到里面加入了 <br /> html的换行标签，也就是说这里的内容，完全可以自己布局设置，除了换行，还有加入一些空格   或者用 <table></table> 来做框架或者画表格什么的。可以自行延伸。

②再给body增加了一个id 为preview的div元素来承载我们要显示的内容，其中 $("#preview").remove();// 防止点击第二次这个地方是因为每次点击控件前删除上次点击出现的内容，保证不会一直增加，导致点击多次后页面显示出问题；

③x，y变量结合left，top，以及postion来实现我们的内容出现在合理的位置。

④ $("body").click(function(e) 这个及下面的内容是为了点击body任意部分移除元素的，但是label也属于在body中所以要加 e.stopPropagation() 阻止冒泡事件；

⑤其他的css样式，可以根据自己需要的，设置内边距，背景，边框，圆角，字号，字体，字色。

再将以下js写入到参数面板的另一个初始化事件中：

setTimeout(function(){	
$("[widgetname='LABEL1']").mouseover(function(e){
var x = 10;
var y = 20;
var z = "1.dadfafasfsalakj<br />2.kalfasjdkfsafkjasfas" //这里写我们想要放置的内容
$("body").append("<div id='preview1'>"+z+"</div>");//弹出一个div里面放着内容
$("#preview1")//修改这个div的样式
.css("position","absolute")
.css("z-index","9999999")
.css("left",(e.pageX + x + 'px')) //调整这个div出现的水平方向位置
.css("top",(e.pageY - y + 'px'))  //调整这个div出现的垂直方向位置
.css("padding","4px")
.css("border","1px solid pink")
.css("border-radius","4px")
.css("background-color","skyblue")
.css("font-size","14px")
.css("font-famliy","微软雅黑")
.css("color","blue")

});
//鼠标离开这个div移除
$("[widgetname='LABEL1']").mouseout(function(e){
$("#preview1").remove();
});
},100)

这个其实和点击的基本上雷同，稍微注意下，获取控件为了区别开，要写对，这里是LABEL1，以及增加元素的id变成了preview1。

这里就不用 click 了，因为是悬浮，所以用了 mouseover 和 mouseout 方法，其实也可以用 hover 来，根据个人使用习惯即可。

3. 模板下载

点击下载模板：

提示测试1.cpt

4. 注意事项

1.label控件上控件值的字符串，如“悬浮提示”一定要写，不然鼠标没法点到。

2.理论上可以迁移到其他控件，以及frm模板，以及单元格(获取单元格，注：决策报表和普通报表获取单元格方法略有区别，可自行了解)中，可自行尝试。