JS实现插入自定义行数

1.1 预期效果

报表开发中，很多情况下用户在增加行数的时候，想要自定义输入行数，然后增加指定的行数，而不是点击一次增加一行，

效果如下图所示：

1.2 实现思路

在单元格按钮控件中，添加 JS 点击事件，通过 appendReportRow() 函数来实现插入行数的功能。接口说明可以参考：页面交互接口。

2.1 设计报表样式

1）新建模板，设计报表样式，A3-F3 单元格添加「文本控件」，如下图所示：

2）为配合即将添加的插入行按钮使用，需设置 A3 单元格为纵向扩展，选中 A3 单元格，设置扩展方向为「纵向扩展」，如下图所示：

2.2 添加按钮控件

在 G3 单元格中添加「按钮控件」，控件类型选择「插入行」，指定单元格 A3，行数修改为 0，如下图所示：

2.3 添加点击事件

给 G3 单元格中「按钮控件」添加点击事件，事件内容为根据输入的行数，插入行，如下图所示：

JavaScript 代码如下：

num = prompt("请输入插入行数","");
_g().appendReportRow(this.options.location, this.options.reportIndex,num)

注：appendReportRow() 函数实现的效果为在选中行后面插入 。

2.4 预览效果

2.4.1 PC 端

保存模板，点击「填报预览」，效果如下所示：

2.4.2 移动端

App 及 HTML5 效果如下图所示：

已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\42-JS实现插入自定义行数.cpt

点击下载模板：42-JS实现插入自定义行数.cpt