JS实现局部刷新cpt

  • 文档创建者:yi丶搁浅
  • 编辑次数:15次
  • 最近更新:Leo.Tsai 于 2020-06-11
  • 1. 概述

    1.1 预期效果

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

    222

    1.2  实现思路

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

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

    2. 示例

    2.1 刷新模板

    2.1.1 准备数据

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

    图片.png

    2.1.2 设计表格

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

    图片.png

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

    图片.png

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

    图片.png

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

    Snag_3af85f.png

    2.1.3 添加事件

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

    图片.png

    JavaScript 代码如下:

    //_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 秒后循环刷新

    2)保存模板,将当前模板重命名为:JS局部刷新。

    2.2 填报模板

    2.2.1 准备数据

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

    图片.png

    2.2.2 设计表格

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

    222

    2)菜单栏点击模板>报表填报属性,如下图设置填报属性:

    图片.png

    3) 保存模板,将当前模板重命名为:填报。

    2.3 效果预览

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

    222

    注:不支持移动端。

    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

    附件列表


    主题: 二次开发
    • 有帮助
    • 没帮助
    • 只是浏览
    • 评价文档,奖励 1 ~ 100 随机 F 豆!