填报页面优化技巧

1.1 问题描述

前端填报预览时，如果选中某个单元格，该单元格会出现如下图所示的黑色外框，比较影响整个页面的美观，那么该如何将这个边框去除掉呢？

1.2 解决方案

1）打开需要去边框的模板，点击模板>模板 Web 属性>填报页面设置，为填报模板添加一个加载结束事件，步骤如下图所示：

JavaScript 代码如下：

_g().curLGP.hideSelectFrame();

2）加载结束事件添加完成后，保存模板，点击填报预览，此时可以看到选中单元格时，没有黑色边框，如下图所示：

注：不支持移动端

如果您想在数据分析页面实现该效果，可参见文档：去除数据分析页面选中单元格时的黑色边框

2.1 问题描述

填报提交和校验在成功或失败后，在填报页面的右侧会弹出如下图所示的提示框，如果想要去掉这个提示框，那么如何实现呢？

2.2 解决方案

以去除提交后的提示框为例，打开模板，点击模板>模板 Web 属性>填报页面设置，下拉选择为该模板单独设置，然后添加填报后事件，如下图所示：

注：如果是去除校验后的提示框，需要改为添加校验后事件，不过代码是一样的。

JavaScript 代码如下：

return false;

3.1 问题描述

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

3.2 解决方案

以单 sheet 填报为例，打开模板，点击模板>模板 Web 属性>填报页面设置，下拉选择为该模板单独设置，然后添加填报成功事件，如下图所示：

JavaScript 代码如下：

location.reload();

3.3 注意事项

对于多 sheet 填报表，若对 sheet2 进行填报，使用如上方案刷新后会跳到 sheet1，那么如何实现在哪个 sheet 填报成功就显示哪个 sheet 呢？

只需要将上面方案的代码修改成如下代码即可： 

this.refreshAllSheets();

4.1 问题描述

有时候希望填报完后可以自动关闭填报页面，效果如下图所示：

4.2 解决方案

打开填报模板，点击模板>模板 Web 属性>填报页面设置，下拉选择为该模板单独设置，然后添加填报成功事件，如下图所示：

JavaScript 代码如下：

window.close();

5.1 问题描述

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

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

5.2 解决方案

打开填报模板，点击模板>模板 Web 属性>填报页面设置，下拉选择为该模板单独设置，然后添加填报成功事件和填报失败事件，如下图所示：

填报成功 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.1 问题描述

如何实现点击超链可以跳转到填报模板，可以直接进行填报呢？

6.2 解决方案

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

7.1 问题描述

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

7.2 解决方案

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

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

8.1 问题描述

填报区域和浏览器整体背景都是白色时，视觉上很难区分，影响填报体验。

想要对填报区域进行视觉突出，效果如下图所示：

8.2 解决方案

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