JS实现局部刷新cpt

1. 概述
1.1 预期效果

填报模式下局部实时刷新某个单元格或者某列单元格，保证数据实时更新，如下图所示：

1.2  实现思路

在 JavaScript 局部刷新页面的加载结束事件中，利用 SQL 函数将需要的数据查询出来。

然后利用公式改变其会重新读取的特性，更改对应的单元格的值来达到重新读取数据库的目的。再用 setInterval 函数循环更改对应单元格值来实现刷新。

2. 示例
2.1 刷新模板
2.1.1 准备数据

新建普通报表，新建数据集 ds1，数据库查询语句为：select * from S客户 limit 5

2.1.2 设计表格

1）如下图设计表格，将字段公司名称、地区、邮编分别拖入对应单元格，如下图所示：

2）其中 B2 单元格需要插入公式：SQL("FRDemo", "SELECT 联系人姓名 FROM S客户 WHERE 1 = " + IF(E2 = 1, 1, 1) + " AND 公司名称 = '" + A2 + "'", 1, 1)

3）将 E2 单元格的左父格设置为 A2 。利用 B2 单元格的公式改变 E2 列的值来重新读取数据库。用 IF 判断将值改成 1，形成 SQL 条件 WHERE 1=1 。

4）利用 B2 单元格的公式改变 E2 列的值来重新读取数据库。用IF判断将值改成 1，形成 SQL 条件 WHERE 1=1。在 E2 单元格输入 1 之后将 E 列隐藏。

2.1.3 添加事件

1）点击模板>模板 Web 属性>填报页面设置，选择为该模板单独设置，添加加载结束事件，如下图所示：

JavaScript 代码如下：

1. //_obj 是 tr 对象  
   
2. var _obj = $(".x-table tr");   
   
3. //_length 是 tr 行数   
   
4. var _length = _obj.length;   
   
5. //循环函数  
   
6. setInterval(function(){  
   
7. //遍历tr  
   
8. for(var i = 0; i < _length; i++) {   
   
9.     //如果第一个是标题，执行 if 条件中 continue,没有标题请注释 if 条件  
   
10.     //如果第 1，2，3 都是标题行，请把 if 条件改成 if(i==0 || i==1|| i==2)  
    
11.     if(i == 0){  
    
12.         continue;  
    
13.     }  
    
14.     //遍历tr中的对象td   
    
15.     var _td = _obj.eq(i).find("td");   
    
16.     //需要刷新的列，eq(4)表示单元格 E 列 (可根据自己需要更改)
    
17.     var _this = _td.eq(4);  
    
18.     //取单元格 E 列值  
    
19.     var _changeVal = _this.text();   
    
20.     //contentPane.setCellValue("E"+(i+1),null,"2") 意思是给 E 列单元格赋值 因为行号是从 0 开始所以赋值给 E 列单元格时候是i+1
    
21. if(_changeVal=="1"){   
    
22. contentPane.setCellValue("E"+(i+1),null,"2")
    
23.     }else if(_changeVal=="2"){
    
24.     contentPane.setCellValue("E"+(i+1),null,"1")
    
25.     }
    
26. }   
    
27.       
    
28. },1000)//1000 表示 1 秒后循环刷新

复制代码

2）保存模板，将当前模板重命名为：JS局部刷新。

2.2 填报模板
2.2.1 准备数据

新建普通报表，新建数据集 ds1，数据库查询语句为：select * from S客户 limit 5

2.2.2 设计表格

1）依次将对应的字段拖入表格中，A2、B2、C2 单元格添加文本控件，D2 添加数字控件。如下图所示：

2）菜单栏点击模板>报表填报属性，如下图设置填报属性：

3） 保存模板，将当前模板重命名为：填报。

2.3 效果预览

同时用填报预览的方式打开这 2 个模板，填报模板修改联系人姓名后，JS局部刷新模板会实时更新联系人姓名的数据，如下图所示：

注：不支持移动端。

4. 模板下载

已完成模板可参见：

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\60-JS局部刷新.cpt

%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\60-填报.cpt

点击下载模板：

60-JS局部刷新.cpt

60-填报.cpt

很棒！

请问两张表单元格字段那些需要设置一样吗?

模板下载不了呀，没有实现上面情况，局部进行刷新

//_obj 是 tr 对象  

var _obj = $(".x-table tr");   

//_length 是 tr 行数   

var _length = _obj.length;   

//循环函数  

setInterval(function(){  

//遍历tr  

var num=2;

//i=2,表示行从3行开始

for(var i = 2; i < _length; i++) {   

//contentPane.setCellValue("F"+(i+1),null,"2") 意思是给 F 列单元格赋值 因为行号是从 0 开始所以赋值给 F 列单元格时候是i+1

if(num=="1"){   

contentPane.setCellValue("F"+(i+1),null,"2")

num=2;

    }else {

    contentPane.setCellValue("F"+(i+1),null,"1")

    num=1;

    }

}   

      

},1000)//1000 表示 1 秒后循环刷新