微信公众号:次世代数据技术 关注可了解更多的教程。问题或建议,请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号:weibw162
本教程视频讲解可以关注本人B站账号进行观看:次世代数据技术
一、需求描述
目前FineReport的移动端报表在打开子报表的时候只有两种方案,要么是整个页面跳转,要么选择移动端弹窗,但这两种方案都对主表有遮盖影响。为此,本文提供一种单击通过抽屉形式打开报表的方案,其实现效果大致如下:
针对以上需求,本文提出一种可行的方案,其大致步骤如下:
- 在移动平台中导入
jquery.min.js
和openByDrawer.js
。 - 通过超级链接的
JavaScript脚本
增加JS配置即可。
注1:本文方案使用到jquery.js及iframe,可能存在部分机型的适配问题。注2:本文涉及到的技术及流程均仅在FineReport 11.0 版本进行实际验证,如果您在使用其他版本过程中出现问题可以联系本作者。
二、具体操作
第一步
下载jquery.min.js
和openByDrawer.js
文件,并保存到工程目录下,具体目录:webroot
>help
>js
。
第二步
在移动平台中引入两个js文件。具体操作为,登录决策平台,点击管理系统
->移动平台
->其它
->引入js
并填入如下代码: 代码如下:
javascript
help/JS/jquery.min.js;help/JS/openByDrawer.js
help/JS/jquery.min.js;help/JS/openByDrawer.js
1
第三步
给指定的单元格添加一个超级链接,类型选择为JavaScript脚本
,并填入如下代码。
JavaScript 代码如下:
javascript
var args = {
"title": "订单明细表",
"titlehtml": "",
"titleStyle": {
"font-size": "16px",
"color": "red",
"font-weight": "700"
},
"templateUrl": "/webroot/decision/view/report?viewlet=文档示例模板/移动端抽屉打开子报表/JS实现抽屉打开报表-子表_mobile.cpt",
"positon": "right",
"size": "80%",
"params": {
"订单号": 订单号,
"op": "h5"
},
}
showTemplatebyDrawer(args);
var args = {
"title": "订单明细表",
"titlehtml": "",
"titleStyle": {
"font-size": "16px",
"color": "red",
"font-weight": "700"
},
"templateUrl": "/webroot/decision/view/report?viewlet=文档示例模板/移动端抽屉打开子报表/JS实现抽屉打开报表-子表_mobile.cpt",
"positon": "right",
"size": "80%",
"params": {
"订单号": 订单号,
"op": "h5"
},
}
showTemplatebyDrawer(args);
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
完成以上配置后,我们直接点击左上角的预览按钮,即可在浏览器中查看到与文章开头效果图类似的报表。
三、API解释
JavaScript
showTemplatebyDrawer(args);
showTemplatebyDrawer(args);
1
参数解释
属性值 | 是否必填 | 属性解释 |
---|---|---|
title | 是 | 窗口展示报表或网页时的标题 |
templateUrl | 是 | 需要打开的报表的地址或网页地址,url参数请使用params参数,不用直接在该项后面拼接 |
params | 否 | 请求url参数,需要传输key:value形式的json |
titleHtml | 否 | 标题中的html元素,可以自定义元素,比如在标题前面增加一个icon图标,当该项有值时title属性将失去效果 |
titleStyle | 否 | 标题的样式,可以自定义标题的文字及背景样式 |
positon | 是 | 抽屉弹出的方向,可选项为'left'、'right'、'top'、'bottom',分别代表左右上下 |
size | 是 | 弹出窗口的大小,当弹出方向为上下时代表高度,弹出方向为左右时代表宽度,可填百分比 |
四、模板文件下载
扫码即可下载文档示例模板及其他代码文件 如果您在阅读或实际操作过程中有问题,可以随时添加作者好友进行咨询。