最新历史版本 :JS实现当前页刷新 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1.概述编辑

1.1 预期效果

1.1.1 示例一:填报成功刷新

1591693047431562.gif

1.1.2 示例二:数据校验刷新

1591693974561995.gif

1.1.3 示例三:点击按钮刷新

1656917560936276.gif

1.2 实现思路

通过location.reload()或者_g().refreshAllSheets()来刷新页面,其区别如下:

location.reload()_g().refreshAllSheets()
  • 效果为整个模板刷新,等同于手动点击浏览器的刷新按钮

  • 参数面板已选参数会重置

  • 如果有多个sheet,刷新后会返回第一个sheet

  • 支持移动端

  • 效果为重新查询,等同于手动点击查询按钮

  • 参数面板已选参数不会重置

  • 如果有多个sheet,刷新后会停留在当前sheet

  • 支持移动端

2. 示例一:填报成功刷新编辑

2.1 准备数据

新建普通报表,新建数据集 ds1,SQL 语句为:SELECT * FROM 雇员

图片.png

2.2 设计表格

如下图设计表格,详细步骤参见文档:自由填报报表示例

图片.png

2.3 添加事件

菜单栏点击模板>模板 Web 属性>填报页面设置,选择为该模板单独设置,添加 填报成功事件,如下图所示:

JavaScript 代码如下:

setTimeout(function() {
_g().refreshAllSheets();
//location.reload();
}, 500)

2.4 效果预览

1)PC 端

保存报表,点击填报预览,填报成功后刷新效果如下图所示:

1591846427313585.gif

2)移动端

1591846519791822.gif

3. 示例二:点击按钮刷新编辑

3.1 准备模板

打开设计器内置模板:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\MultiSheetReport\简单多sheet填报示例.cpt

Snag_6d466119.png

3.2 添加事件

1)进入参数面板,将一个按钮控件拖到面板,按钮名字改为“刷新”,如下图所示:

Snag_6d47d606.png

2)选择按钮控件,添加一个点击事件,如下图所示:

Snag_6d494323.png

JavaScript 代码如下:

setTimeout(function() {
//_g().refreshAllSheets();
location.reload();
}, 500)

3.3 效果预览

保存模板,点击填报预览,刷新效果如下图所示:

1656917437796680.gif

注:该方案不支持移动端。

4. 模板下载编辑

4.1 示例一

点击下载模板:填报成功刷新.cpt

4.2 示例二

点击下载模板:点击按钮刷新.cpt