JS自定义提交按钮

  • 文档创建者:文档助手1
  • 编辑次数:21次
  • 最近更新:Leo.Tsai 于 2020-07-31
  • 1. 描述

    如果您定义了一个自定义按钮实现了一些您自己的业务逻辑,但是您也想这个按钮实现提交入库的操作,那如何在自定义按钮中实现 FineReport 的提交操作呢?

    2. 思路

    在自定义按钮中添加一个 点击事件,利用 FineReport 提供的 JS 接口方法来实现当点击按钮时执行提交操作。

    注:自定义按钮实现提交入库事件,在 cpt 中不会触发及时校验,只能通过单独的 JS 来进行校验,而 frm 可以触发及时校验。

    3. 示例

    3.1 模板准备

    打开模板%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\LineForm.cpt

    自定义按钮提交,即不使用内置的提交按钮,点击模板>模板web属性>填报页面设置,去掉其使用工具栏前面的勾选,隐藏工具栏,如下图所示:

    222

    3.2 添加按钮

    在 B1 单元格中添加一个按钮控件,其控件名字为提交,即自定义的提交按钮,如下图所示:

    222

    3.3 提交按钮提交JS

    选中提交按钮,在事件编辑中添加一个点击事件:

    222

    JS 如下:

    _g('${sessionID}').writeReport();

    FineReport 数据提交的时候还包含数据校验,如果自定义按钮提交的时候同时希望执行内置的提交校验,校验不通过,则不提交,那么 JS 可更改为:

    _g('${sessionID}').verifyAndWriteReport();
    _g('${sessionID}').verifyAndWriteReport([Object isAllSheet]); 选填,true 为提交所有sheet

    注1:上面两种提交 JS 的区别在于,前者是强制提交,不论数据是否符合规范,都会执行提交操作,后者是 提交校验,如果数据不符合提交校验的规则,则中断提交过程。

    注2:除了提交接口,校验提交接口,FineReport 还提供了单独的数据校验接口:verifyReport()。

    Web 页面集成中的自定义按钮提交详细请参照 自定义提交按钮

    3.4 效果查看

    保存模板,点击填报预览,随便修改一个数据,点击提交按钮,刷新页面即可看到此数据填报成功,如下图所示:

    222

    如果使用内置校验的提交 JS 接口,如下图,点击模板>报表填报属性>数据校验,新增一个内置校验:

    222

    注:校验出错信息必须用引号扩起来,不然提示信息显示不出来。

    保存,再次点击填报预览,修改其中一个 D3 单元格的值大于 4,比如说产品编号为 4 的供应商为 6,点击提交按钮,页面会提示出错信息,并中断提交操作,如下图所示:

    222

    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!