JS实现局部刷新cpt

编辑
  • 文档创建者:yi丶搁浅
  • 浏览次数:6026次
  • 编辑次数:10次
  • 最近更新:Kevin-s 于 2019-06-21
  • 1. 描述

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



    2. 思路

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


    3. 操作步骤

    3.1 JS 局部刷新模板

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


    项目子类的公式如下,意思是利用改变 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 属性>填报页面设置,选择为该模板单独设置,添加加载结束事件,如下图:


    3)具体J avaScript 代码如下

    1.刷新单个单元格 JavaScript

    //循环函数  
    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;如下图拖入数据列:


    A2、B2、C2单元格添加文本控件;D2添加数字控件;

    点击模板>报表填报属性,如下图设置填报属性:

    提交类型:更新提交;选择对应的表并添加对应字段、添加单元格。实例可参考 报表填报属性设置

    4. 预览效果

    4.1 PC 端预览效果

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

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


    注:不支持移动端。

    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

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