JS给扩展单元格置数

  • 文档创建者:印然
  • 编辑次数:13次
  • 最近更新:Kevin-s 于 2019-12-19
  • 1. 概述

    1.1 问题描述

    通常情况下,使用 setCellValue("单元格", null, 值)给单元格置数,该方法只能给固定单元格置数。

    若单元格扩展的,如对纵向扩展的 A1 单元格赋值:setCellValue("A1", null, 值),会发现扩展后只有 A1 位置的单元格赋到值,而扩展出来其他单元格没有值,如何对扩展出来的单元格置数呢?

    如下,在每一行的编辑单元格中输入数字,则受控单元格根据该值是否大于 10 来显示 1 或 0:

    image.png


    1.2 思路

    扩展的单元格在填报页面上根据来源不同可以分为两类,一个是直接根据数据列扩展出来的单元格,一种是填报时插入行时扩展出来的单元格,不同的扩展方式,其置数方式也不尽相同,下面详细介绍。


    2. 示例

    2.1 直接扩展的单元格

    在控件的编辑结束事件中,动态地将行号与列号作为参数传递给js函数,使用 contentPane.setCellValue(col, row, value);来给单元格赋值。

    其中 col、row 都从 0 开始。
    这里当编辑控件的值大于 10 时,受控单元格置数为 1;反之,置数为 0。

    1)如上图对应模板设计界面如下:

    222

    2)给B2文本框控件添加编辑结束事件,传入行号 row 与列号 col 参数,值分别为:=row()-1=col()

    image.png

    具体 JS 代码如下:


    if(this.getValue()>10){
      contentPane.setCellValue(col,row,1);
    }else{
      contentPane.setCellValue(col,row,0);
    }


    2.2 插入行扩展的单元格

    在填报 Web 属性中增加加载结束事件,使用 FineReport 的监听事件获取到当前编辑单元格的行号和列号,保存在全局变量中,然后在单元格的编辑结束事件中拿到该行号列号给单元格赋值,FineReport 监听事件获取单元格行号列号请查看 获取当前编辑行单元格行号

    1)新建一张模板,在 A2 和 B2 两个单元格中添加 2 个文本控件:

    222

    2)点击模板>模板 Web 属性>填报页面设置,新增一个加载结束事件,JS 如下:

    注:全局变量必须在前面加一个 Window。
    image.png具体 JS 代码如下:


    contentPane.on("cellselect", function(td) {  
      var row =contentPane.curLGP.getTDRow(td); 
      var col =contentPane.curLGP.getTDCol(td);
      window.row=row;
      window.col=col;
    });

    3)为 A2 单元格中的控件添加一个编辑结束事件,JS 如下:

    注:监听事件中获取到的行号列号从 1 开始计算,赋值时从 0 开始计算。

    image.png


    var value=this.getValue();
    contentPane.setCellValue(window.col,window.row-1,value);


    2.3 预览效果

    保存模板,选择填报预览,PC 端实现效果下图所示:

    1)直接扩展的单元格

    222

    2)插入行扩展的单元格

    222

    移动端预览效果:

    支持直接扩展 

    不支持插入行扩展

    222


    3. 模板下载

    1)直接扩展的单元格

    模板效果在线查看请点击:JS 给扩展单元格置数示例一.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\48-JS给扩展单元格置数示例一.cpt

    点击下载模板:48-JS给扩展单元格置数示例一.cpt

    2)插入行扩展的单元格

    模板效果在线查看请点击:JS 给扩展单元格置数示例二.cpt

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\48-JS给扩展单元格置数示例二.cpt

    点击下载模板:48-JS给扩展单元格置数示例二.cpt


    附件列表


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