自定义添加删除行按钮

  • 文档创建者:文档助手1
  • 编辑次数:15次
  • 最近更新:susie 于 2019-10-10
  • 1. 问题描述

    直接在数据列后放置增加行和删除行按钮,由于添加删除行包含了一些脚本,若数据量很大时,这些脚本就会导致模板运行慢。为此可以采取只是用一个插入行和删除行按钮,但是这样会导致在点击删除行时只能删除一条数据,如何让鼠标焦点到哪行删除哪行数据,选中哪行,则在哪行下面插入数据呢?

    2. 实现思路

    通过给报表增加填报的加载结束事件,在事件中增加单元格监听事件获取当前行号并把赋值给 Window 的对应,最后在自定义按钮中增加点击事件并调用删除方法即可。

    3. 示例

    3.1 打开模板

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

    3.2 加载结束事件设置

    点击模板>模板 Web 属性>填报页面设置,勾选为该模板单独设置,然后在事件编辑中增加加载结束事件,JS 具体的代码如下:

    var curLGP = contentPane.curLGP; //获取当前填报表
    contentPane.on("cellselect", function(rowvalue)
     { //增加单元格选中监听事件
     var rownum = $(rowvalue).attr("id"); //获取选中的单元格的当前行号
    window.num = rownum; //将当前行号赋值给window的num变量
     });


    3.3 模板设置

    在模板的任一位置增加两个按钮,控件名分别为插入行和删除行,如下图:

    222

    3.4 插入行设置

    为插入行按钮添加一个点击事件,如下图:
    222

    contentPane.appendReportRC(1);


    3.5 删除行设置

    将普通按钮的名称命名为删除行,并增加按钮点击事件,如下图:
    222

    具体的代码如下:

    contentPane.deleteReportRC(null,window.num);

    3.6 效果查看

    点击填报预览,选中要删除的行进行删除,可以看到对应的行被删除了,如上效果图。在线查看模板效果请点击 AddDelete.cpt

    已完成模板请参照%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\FormFAQ\AddDelete.cpt


    附件列表


    主题: 填报应用
    • 有帮助
    • 没帮助
    • 只是浏览