历史版本15 :JS自定义插入和删除行按钮 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

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