JS实现只剩一行时不可删除

1. 概述


1.1 预期效果

填报时如果只剩一行数据，那么该行数据不可删除，效果如下图所示：

1.2 实现思路

可以通过添加 JS 事件或者设置条件属性来实现。

2.示例


2.1 准备模板

打开设计器内置模板：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\Form\LineForm\填报控件.cpt

将数据集修改为：SELECT * FROM 产品  order by 产品ID limit 1，只取出其中的一条数据，如下图所示：   

2.2 添加按钮

1）在 L3 单元格中添加按钮控件，按钮类型为：插入行，指定单元格为：B3，如下图所示：

2）同理 M3 中也添加按钮控件，类型为：删除行，制定单元格为：B3，设置控件名为 sc1，不可用状态，如下图所示：

注：如果模板里还有其他的删除行按钮，也要实现相同的效果，依次命名为sc2、sc3等等。

最终报表样式如下图所示：

2.3 添加 JS 事件

点击模板>模板web属性>填报预览设置，选择为该模板单独设置，然后添加加载结束事件，如下图所示：

JavaScript 代码如下：

1. var arr=["sc1"];//sc1为控件名   
   
2. for(j=0;j<arr.length;j++){ //遍历获取数组内控件  
   
3. var self=contentPane.getWidgetsByName(arr[j]);   
   
4. var flag=0;   
   
5. for (i=0;i<self.length;i++){   
   
6. var tr=self[i].element.parent().parent().css("display");   
   
7. if(tr=="table-row"){   
   
8.     flag++;   
   
9.     }   
   
10. }   
    
11. if(flag==1){  //判断如果只剩下一个控件则设定为不能被删掉  
    
12.     for (i=0;i<self.length;i++){   
    
13.       var tr2=self[i].element.parent().parent().css("display");   
    
14.       if(tr2=="table-row"){           
    
15.         self[i].setEnable(false);         
    
16.       }   
    
17.    }     
    
18. }   
    
19. else{  //如果不止一个控件则可以进行删除操作  
    
20.     for(i=0;i<self.length;i++){   
    
21.         self[i].setEnable(true);   
    
22. }   
    
23.     }   
    
24. }

复制代码

2.4 效果预览

保存报表，点击填报预览，PC端实际效果如下所示：

注：不支持移动端。

3. 模板下载

已完成模板可参见：%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\JS实现只剩一行时不可删除.cpt

点击下载模板：JS实现只剩一行时不可删除.cpt