【分页预览JS实例】JS实现隐藏行重新编号

1. 描述

对扩展后的数据使用条件属性>行高隐藏行后，导致之前编好的序号被打乱，下面提供 JS 实现隐藏行重新编号的方法：

2. 思路

通过 JavaScript 代码判断该行是否已经隐藏，不隐藏的才进行编号。


3. 示例

1）创建数据查询，新建模板数据集 ds1，如下图所示：

SELECT * FROM 销量

2）报表设计如下，A2 单元格为空，其左父格为 B2：

3）选中 B2 单元格，选择条件属性>行高，隐藏地区为华北的数据行。具体设置如下图所示：

4）选中 F2 单元格，选择条件属性>行高，隐藏销量大于300的数据行。具体设置如下图所示：

5）打开模板>模板 Web 属性>分页预览设置，选择为该模板单独设置，添加加载结束事件：

1. $(".x-table tr:visible").each(function(i){
   
2. if(i>0){//第一行编号为0，因此要排除
   
3.    $(this).find("td:first").text(i);
   
4. }
   
5. })
   
6. 如果第一行设置了重复与冻结，那么 JavaScript 代码修改如下，其他不变:
   
7. 
   
8. $(".x-table:last tr:visible").each(function(i){
   
9. if(i>2){
   
10.     $(this).find("td:first").text(i-2);//前面有.x-table的frozon-coner/frozon-north/frozon-west三个<tr>需要剔除
    
11.     }
    
12. })//如果不踢除，那么不设置条件属性的时候就会出错

复制代码

4. 预览效果

保存模板，点击分页预览，效果如下图所示：

注：不支持移动端预览

5. 已完成模板

已完成模板可参见%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Primary\DetailReport\JS实现隐藏行重新编号.cpt

模板下载见附件