最新历史版本 :填报页面优化技巧 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 去除填报页面选中单元格时的黑色边框编辑

1.1 问题描述

前端填报预览时,如果选中某个单元格,该单元格会出现黑色外框,比较影响整个页面的美观,如下图所示:

Snag_14fe7a07.png

1.2 解决方案

1)打开需要去除黑色外框的模板,点击菜单栏「模板>模板 Web 属性>填报页面设置>为该模板单独设置」,添加加载结束事件,如下图所示:

6.png

JavaScript 代码如下:

_g().curLGP.hideSelectFrame();

2)保存模板,点击「填报预览」,此时选中单元格,可以看到没有黑色边框,如下图所示:

注1:不支持移动端。

注2:如果希望在数据分析页面实现该效果,可参见文档:去除数据分析页面选中单元格时的黑色边框 。

Snag_1518dcc9.png

2. 去除填报提示框编辑

2.1 问题描述

填报提交和校验在成功或失败后,在填报页面的右侧会弹出提示框,如下图所示:

7.png

2.2 解决方案

以去除提交后的提示框为例,打开模板,点击菜单栏「模板>模板 Web 属性>填报页面设>为该模板单独设置」,添加填报后事件,如下图所示:

注:如果是去除校验后的提示框,JS 代码相同,但填报后事件需要改为添加校验后事件。

8.png

JavaScript 代码如下:

return false;

3. 填报成功后自动刷新页面编辑

3.1 应用场景

在填报提交成功后,希望页面可以立即刷新,直接看到更新后的数据,如下图所示:

4798FCEF-8291-42CA-AED0-4990CA7C46F3.GIF

3.2 实现方案

以单 sheet 填报为例,打开模板,点击菜单栏「模板>模板 Web 属性>填报页面设置>为该模板单独设置」,添加填报成功事件,如下图所示:

9.png

JavaScript 代码如下:

location.reload();

3.3 注意事项

对于多 sheet 填报表,若对 sheet2 进行填报,使用此方案刷新后会跳转到 sheet1,希望实现哪个 sheet 填报成功,刷新后就显示哪个 sheet ,则需要将此方案的代码修改为: 

this.refreshAllSheets();

4. 填报成功后自动关闭窗口编辑

4.1 应用场景

希望填报成功后自动关闭填报页面,如下图所示:

9BA6B27C-11B0-4430-8AC0-73E2F6A004A6.GIF

4.2 实现方案

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

10.png

JavaScript 代码如下:

window.close();

5. 填报提交后自动跳转编辑

5.1 应用场景

  • 对一组报表进行填报时,希望填报成功后可以自动跳转到下一个报表进行填报。

  • 填报提交后,如果填报失败,希望可以跳转到指定的失败页面。

5.2 实现方案

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

11.png

填报成功 JavaScript 代码如下:

window.open("/webroot/decision/view/report?viewlet=doc%2FForm%2FFreeFrom%2FFreeForm.cpt&op=write");//示例模板链接,用户可自行更换

填报失败 JavaScript 代码如下:

window.open("/webroot/WEB-INF/resources/error.html");//示例页面链接,用户可自行更换

6. 超链打开填报模板编辑

6.1 应用场景

希望实现点击超链可以跳转到填报模板,直接进行填报呢,如下图所示:

9C5603E5-0D6E-4F9F-AB2A-D8E7A2735A17.GIF

6.2 实现方案

如果链接的是填报模板,希望点击超链后模板以填报预览方式打开,此时需要在报表的路径后面加参数&op=write,如下图所示:

1629359857368935.png

7. 填报时自动计算编辑

7.1 应用场景

前端填报时,希望根据用户录入的其他单元格数据,自动计算出另外一些单元格的值,从而简化用户的输入,同时避免人工计算可能导致的错误,如下图所示:

222

7.2 实现方案

在公式编辑界面,勾选「填报/分析时,保留公式用于计算」即可,如下图所示:

注:填报设置自动计算后,计算时会与服务器进行交互,计算过程是由后台服务器进行的,因此自动计算一定程度上影响了填报效率,若用户不需要自动计算,尽量不设置自动计算以提高填报效率。

image.png

8. 填报视觉突出编辑

8.1 应用场景

填报区域和浏览器整体背景都是白色时,视觉上很难区分,影响填报体验。希望对填报区域进行视觉突出,如下图所示:

kk.png

8.2 实现方案

在设计器里面直接修改浏览器背景色,跟填报区域区分开形成视觉差,如下图所示:

12.png