历史版本7 :JS实现工具栏添加计数 返回文档
编辑时间: 内容长度:图片数:目录数: 修改原因:

目录:

1. 描述编辑

场景描述：在报表查看过程中，有时候需要有计算当前行数的功能，我们可以在工具栏上显示当前条数。

分页预览工具栏中有上一页，下一页，导出之类的功能，唯独没有计数功能，此处通过添加一个自定义按钮来实现该功能。

效果如下：

222

2. 思路编辑

我们可以利用工具栏的“加载结束”事件上，利用获取某一个隐藏的单元格上面的内容，而这个单元格可以计算当前页的条数。

3. 操作步骤编辑

3.1 修改模板

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

2）编辑ds1数据集，将sql修改为：SELECT * FROM 产品  order by 产品ID
222

3）选中所有单元格，右键选中的单元格，清除控件：

222
4）删掉A列，并调整报表页面宽度，如下图：

222

5）在A1单元格插入公式：COUNT({A3})，计算当前页数据行数：

222
6）同理，在B1单元格插入公式：COUNT(A3)，计算报表数据总行数：
222
注：A1、B1单元格的两个公式不一样，A1单元格多了一对中括号，{A3}的含义是获取当前页的A3单元格的值。
7）右击第1、2行，设置重复标题行：
222
8）右击第1行，点击隐藏：
222
3.2 分页预览设置

1）选择模板>模板Web属性>分页预览设置，双击自定义按钮，添加至工具栏：

222

添加加载结束事件，如下图：

222
js代码如下：
var curnum = $("td[id^='A1']").html(); //获取A1单元格的值，即当前页数据条数 var rownum = $("td[id^='B1']").html(); //获取B1单元格的值，即报表总数据条数 $('#fr-btn-CustomToolBarButton').text("当前页" + curnum + "条数据，共" + rownum + "条数据");

4. 预览效果编辑

4.1 PC端预览效果

保存模板，选择分页预览，效果如上。

注：经过测试，移动端不支持该效果。

5. 已完成模板编辑

模板效果在线查看请点击：JS实现工具栏添加计数.cpt
已完成的模板，可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\工具栏JS实例\01-JS实现工具栏添加计数.cpt
点击下载模板