Weibw's FR
微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：weibw162
本教程视频讲解可以关注本人B站账号进行观看：次世代数据技术
一、需求描述
目前FineReport的超级链接仅支持单击弹窗打开报表，本文提供一种右击弹窗打开报表的方案。其实现效果大致如下：
针对以上需求，本文提出一种可行的方案，其大致步骤如下：
- 屏蔽页面原生的右击事件。
- 通过
JQ给指定单元格增加右击事件。 - 在右击事件中创建
iframe，并通过调用FR的dialog接口进行显示。
注1：不支持移动端。注2：本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证，如果您在使用其他版本过程中出现问题可以联系本作者。
二、具体操作
其实操作很简单，只需要给页面增加一个初始化事件即可，具体操作为，点击左上角 模板->模板web属性->分页预览设置，然后点击左下角的事件设置里增加一个加载结束事件，并写入如下JavaScript脚本。 JavaScript 代码如下：
javascript
//屏蔽自带右键菜单
document.oncontextmenu = function (e) {
return false;
}
// 给指定的单元格添加右击事件，注意要排除标题及表头行
$('td[id^="A"]:not(td[id^="A1-"],td[id^="A2-"],td[id^="A3-"],td[id^="A4-"],td[colspan="6"])')
.contextmenu(function () {
// 获取当点击单元格的值
var ddh = $(this).find('span div').text() || $(this).find('div').text()
// 判断如果该值不为空则弹窗
if (ddh.length > 0) {
// 定义弹窗需要打开的报表连接，并通过url参数将订单号的值传递
var url = "/webroot/decision/view/report?viewlet=文档示例模板/JS实现右键弹窗打开报表/JS实现右键弹窗打开报表-子表.cpt&op=view&订单号=" + ddh;
// 对url进行urlencode
url = FR.cjkEncode(url);
// 定义弹窗所用的iframe元素
var $iframe = $("<iframe id='ddmx' name='ddmx' width='100%' height='100%' scrolling='no' frameborder='0'>");
// 赋予iframe打开的地址为上面定义的报表连接地址
$iframe.attr("src", url);
// 配置弹窗的信息
var o = {
title: "订单明细表", // title代表弹窗表头
width: 1234, // 弹窗宽度
height: 666 // 弹窗高度
};
// 显示弹窗
FR.showDialog(o.title, o.width, o.height, $iframe, o)
}
})//屏蔽自带右键菜单
document.oncontextmenu = function (e) {
return false;
}
// 给指定的单元格添加右击事件，注意要排除标题及表头行
$('td[id^="A"]:not(td[id^="A1-"],td[id^="A2-"],td[id^="A3-"],td[id^="A4-"],td[colspan="6"])')
.contextmenu(function () {
// 获取当点击单元格的值
var ddh = $(this).find('span div').text() || $(this).find('div').text()
// 判断如果该值不为空则弹窗
if (ddh.length > 0) {
// 定义弹窗需要打开的报表连接，并通过url参数将订单号的值传递
var url = "/webroot/decision/view/report?viewlet=文档示例模板/JS实现右键弹窗打开报表/JS实现右键弹窗打开报表-子表.cpt&op=view&订单号=" + ddh;
// 对url进行urlencode
url = FR.cjkEncode(url);
// 定义弹窗所用的iframe元素
var $iframe = $("<iframe id='ddmx' name='ddmx' width='100%' height='100%' scrolling='no' frameborder='0'>");
// 赋予iframe打开的地址为上面定义的报表连接地址
$iframe.attr("src", url);
// 配置弹窗的信息
var o = {
title: "订单明细表", // title代表弹窗表头
width: 1234, // 弹窗宽度
height: 666 // 弹窗高度
};
// 显示弹窗
FR.showDialog(o.title, o.width, o.height, $iframe, o)
}
})完成以上配置后，我们直接点击左上角的选择分页预览按钮，即可在浏览器中查看到与文章开头效果图类似的报表。
三、模板文件下载
扫码即可下载文档示例模板及其他代码文件 如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。