历史版本33 :JS自定义按钮实现报表块翻页 返回文档
编辑时间:
内容长度:图片数:目录数:
修改原因:
1. 概述编辑
1.1 问题描述
JS实现决策报表定时刷新 文档中,是刷新的整个决策报表,但有的时候我们不想刷新整个决策报表,而只想刷新报表里的报表块。
那么报表里的报表块如何实现局部刷新以及传参呢?
如下图所示:
点击「跳转到第2页」按钮,报表块跳转到第 2 页,并且报表中通过公式 =$month正常获取到了参数值。
1.2 解决思路
通过 JS 获取报表块,再使用 gotopage() 接口来实现局部刷新和传参。
_g().getWidgetByName("report0").gotoPage(pn, para, noCache)
参数 | 类型 | 说明 |
---|---|---|
pn | Number | 页序号,序号 从1 开始 |
para | JSON | 选填,跳转报表块页面时携带的参数 |
noCache | Boolean | 选填,true时跳转报表块不使用缓存,强制取新的数据 |
2. 示例编辑
2.1 准备模板
1)点击设计器左上角「文件>新建决策报表」,新建空白模板。将 body 属性中的布局方式改为「绝对布局」。
2)向 body 中拖入一个按钮控件和一个报表块。
如下图所示:
2.2 报表块设计
双击报表块,进入编辑界面,表格样式设计如下:
1)表格中的数据可随意输入文本内容,本例中表达的是 1-12 月的月份,B5 单元格插入公式 =$month ,用于接收「按钮控件」传来的参数。
2)选择 B4 和 B8 单元格,点击「单元格属性>其他」,设置「行后分页」。如下图所示:
3)设置完成后点击左下方「表单」回到 body 界面。选中 report0 ,点击「属性」,打开「报表块工具栏」。如下图所示:
2.3 设置按钮控件
选中 button0 按钮,在属性中将「按钮名字」设置为「跳转到第2页」,再点击「事件」,添加一个「点击」事件,输入 JavaScript 代码:
_g().getWidgetByName("report0").gotoPage(2, "{month:5}", true);
//report0跳转到第2页,并将month等于5传参给report0
如下图所示:
2.4 效果预览
2.4.1 PC 端
保存模板,点击「PC端预览」,效果如 1.1 节效果图所示。
2.4.2 移动端
App 端和 HTML5 端均支持,效果如下图所示:
3. 模板下载编辑
已完成模板可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\表单JS实例\JS实现决策报表内报表块翻页.frm
点击下载模板:JS实现决策报表内报表块翻页.frm