JS实现局部刷新cpt

编辑
文档创建者:yi丶搁浅 (55647 )     浏览次数:1461次     编辑次数:8次     最近更新:ukae 于 2018-08-07     

目录:

1. 描述编辑

填报模式下局部实时刷新某个单元格或者某列单元格。效果图如下:

222

2. 思路编辑

在js局部刷新页面的加载结束事件中,利用sql函数将需要的数据查询出来。然后利用公式改变会重新读取的特性,更改对应的单元格值来达到重新读取数据库的目的。再用setInterval函数循环更改对应单元格值实现刷新目的。

3. 操作步骤编辑

3.1 JS局部刷新模板

1)新建普通报表:JS局部刷新.cpt;添加模板数据集:select * from S客户 limit 5在表格列设置公式用sql函数读取对应列,如下图:

222
项目子类的公式如下,意思是利用改变E2列的值来重新读取数据库。用IF判断将值改成1,形成sql条件 WHERE 1=1 

SQL("FRDemo", "SELECT 联系人姓名 FROM S客户 WHERE 1 = " + IF(E2 = 1, 1, 1) + " AND 公司名称 = '" + A2 + "'", 1, 1)

在E2单元格输入1之后将E列隐藏。

2)点击模板>模板web属性>填报页面设置,选择为该模板单独设置,添加加载结束事件,如下图:

222

3)具体js如下

1.刷新单个单元格js

//循环函数 setInterval(function(){ //获取第二行第5列E2单元格对象 var _changeCell = $("tr[tridx=1]","div.content-container").children().eq(4); //获取E2单元格值 var _changeVal = _changeCell.text(); //给表格赋值 if(_changeVal=="1"){ contentPane.setCellValue("E2",null,"2") }else if(_changeVal=="2"){ contentPane.setCellValue("E2",null,"1") } },1000)//1000表示1秒后循环刷新  

2.刷新某列,比如扩展列。

//_obj是tr对象 var _obj = $(".x-table tr"); //_length是tr行数 var _length = _obj.length; //循环函数 setInterval(function(){ //遍历tr for(var i = 0; i < _length; i++) { //如果第一个是标题,执行if条件中continue,没有标题请注释if条件 //如果第1,2,3都是标题行,请把if条件改成 if(i==0 || i==1|| i==2) if(i == 0){ continue; } //遍历tr中的对象td var _td = _obj.eq(i).find("td"); //需要刷新的列,eq(4)表示单元格E列 (可根据自己需要更改) var _this = _td.eq(4); //取单元格E列值 var _changeVal = _this.text(); //contentPane.setCellValue("E"+(i+1),null,"2") 意思是给E列单元格赋值 因为行号是从0开始所以赋值给E列单元格时候是i+1 if(_changeVal=="1"){ contentPane.setCellValue("E"+(i+1),null,"2") }else if(_changeVal=="2"){ contentPane.setCellValue("E"+(i+1),null,"1") } } },1000)//1000表示1秒后循环刷新   
上述截图使用了<刷新某列>公式。
3.2 填报模板
新建普通报表:填报.cpt;添加模板数据集:select * from S客户 limit 5;如下图拖入数据列:
222
A2、B2、C2单元格添加文本控件;D2添加数字控件;
点击模板>报表填报属性,如下图设置填报属性:
222
提交类型:更新提交;选择对应的表并添加对应字段、添加单元格。实例可参考报表填报属性设置

4. 预览效果编辑

4.1 pc端预览效果

填报预览:填报.cpt/JS局部刷新.cpt;在填报页面修改联系人姓名的值,提交;

查看JS局部刷新页面,观察到联系人姓名(王小姐、杨先生、孙先生)已经实时更新为刚才修改过的值(01、02、03)了;如下图所示:

222

注:不支持移动端。

5. 已完成模板编辑

点击在线查看模板:填报.cpt    JS局部刷新.cpt

已完成模板可参考:%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

点击下载模板:填报.cpt    JS局部刷新.cpt


附件列表


主题: 二次开发
如果您认为本文档还有待完善,请编辑

文档内容仅供参考,如果你需要获取更多帮助,付费/准付费客户请咨询帆软技术支持
关于技术问题,您还可以前往帆软社区,点击顶部搜索框旁边的提问按钮
若您还有其他非技术类问题,可以联系帆软传说哥(qq:1745114201

此页面有帮助吗?只是浏览 [ 去社区提问 ]