JS实现隐藏行/列

  • 文档创建者:gxy120313
  • 编辑次数:18次
  • 最近更新:Carly 于 2020-03-19
  • 1. 概述

    1.1 问题描述

    在填报过程中,有时候可能想要实现点击某个按钮,隐藏特定的行数和列数。该如何实现呢?

    1.2 解决思路

    通过给按钮控件添加点击事件,即可实现隐藏行列。

    注:该隐藏行/列的方法不支持导出。

    2. 示例一:隐藏行

    2.1 新建模板

    新建普通报表,保存为:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\35-JS隐藏行或列示例一.cpt

    报表样式如下图所示:

    1584603260471191.png

    2.2 设置按钮控件

    选中 A1 单元格,点击控件,设置为按钮控件,按钮类型为普通,按钮名称为关闭第二、三、四行,如下图所示:

    1584602955541104.png

    2.3 添加点击事件

    选中 A1 单元格,点击控件>事件,添加点击事件,输入 JavaScript 代码,如下图所示:

    1584603173778921.png

    JavaScript 代码如下:

    $("#r-1-0").toggle(); 
    $("#r-2-0").toggle(); 
    $("#r-3-0").toggle(); 
    if (contentPane.curLGP.$editor) { 
    contentPane.curLGP.$editor.toggle(); 
    }

    注:8.0 中可以不加 if (contentPane.curLGP.$editor) { contentPane.curLGP.$editor.toggle(); }这段 JS 代码,6.5 和 7.0 在后面需要加上这段代码。

    当模板中存在多个 Sheet 时,则 JavaScript 代码为:

    注:$("#r-1-0")中的 0 表示 Sheet 的位置(从 0 开始计算)

    $("#r-1-0").toggle(); 
    $("#r-2-0").toggle(); 
    $("#r-3-0").toggle(); 
    if (contentPane.curLGP.$editor) { 
    contentPane.curLGP.$editor.toggle(); 
    }

    2.4 效果预览

    保存模板,点击填报预览,效果如下图所示:

    1584603639455536.gif

    注:不支持移动端。

    3. 示例二:隐藏列

    3.1 新建模板

    新建普通报表,保存为:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\35-JS隐藏行或列示例二.cpt

    报表样式如下图所示:

    1584603755633111.png

    3.2 设置按钮控件

    选中 A1 单元格,点击控件,设置为按钮控件,按钮类型为普通,按钮名称为点击隐藏B、C两列,如下图所示:

    1584603853967394.png

    3.3 添加点击事件

    选中 A1 单元格,点击控件>事件,添加点击事件,输入 JavaScript 代码,如下图所示:

    1584604022986319.png

    JavaScript 代码如下:

    $("td[id^='B']").toggle();//隐藏B列  
    $("td[id^='C']").toggle();//隐藏C列

    当模板中存在多个 Sheet 时,则 JavaScript 代码为:

    注:$("B1-0-0")中第一个 0 表示 Sheet 的位置(从 0 开始计算)。

    $("#B1-0-0").toggle();//隐藏B列  
    $("#C1-0-0").toggle();//隐藏C列

    3.4 效果预览

    保存模板,点击填报预览,效果如下图所示:

    222

    注:不支持移动端。

    4. 模板下载

    4.1 示例一:隐藏行

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\35-JS隐藏行或列示例一.cpt

    点击下载模板:35-JS隐藏行或列示例一.cpt

    4.2 示例二:隐藏列

    已完成的模板,可参见:%FR_HOME%\webapps\webroot\WEB-INF\reportlets\doc\JS\填报预览JS实例\35-JS隐藏行或列示例二.cpt

    点击下载模板:35-JS隐藏行或列示例二.cpt

    附件列表


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