Weibw's FR
微信公众号：次世代数据技术 关注可了解更多的教程。问题或建议，请公众号留言或联系本人; 如果您有报表开发需求或者定制化功能开发,也可以联系本人; 微信号：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.jshelp/JS/jquery.min.js;help/JS/openByDrawer.js第三步
给指定的单元格添加一个超级链接，类型选择为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);完成以上配置后，我们直接点击左上角的预览按钮，即可在浏览器中查看到与文章开头效果图类似的报表。
三、API解释
JavaScript
showTemplatebyDrawer(args);showTemplatebyDrawer(args);参数解释
| 属性值 | 是否必填 | 属性解释 |
|---|---|---|
| title | 是 | 窗口展示报表或网页时的标题 |
| templateUrl | 是 | 需要打开的报表的地址或网页地址，url参数请使用params参数，不用直接在该项后面拼接 |
| params | 否 | 请求url参数，需要传输key:value形式的json |
| titleHtml | 否 | 标题中的html元素，可以自定义元素，比如在标题前面增加一个icon图标，当该项有值时title属性将失去效果 |
| titleStyle | 否 | 标题的样式，可以自定义标题的文字及背景样式 |
| positon | 是 | 抽屉弹出的方向，可选项为'left'、'right'、'top'、'bottom'，分别代表左右上下 |
| size | 是 | 弹出窗口的大小，当弹出方向为上下时代表高度，弹出方向为左右时代表宽度，可填百分比 |
四、模板文件下载
扫码即可下载文档示例模板及其他代码文件 如果您在阅读或实际操作过程中有问题，可以随时添加作者好友进行咨询。