JS实现隐藏行/列

1. 描述
2. 思路
3. 操作步骤
4. 预览效果
5. 已完成模板

1. 描述

在实际的填报中，有时候可能想要实现点击某个按钮，隐藏特定的行数和列数，这时候就需要使用js进行隐藏了

2. 思路

给按钮控件添加点击事件来隐藏行列

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

3. 操作步骤

3.1 隐藏行

1）新建一张模板

在A1单元格中添加一个控件，控件类型选择为按钮类型，按钮名称为关闭第二、三、四行，如下图所示：

222

2）给按钮添加点击事件

点击事件编辑，添加点击事件

js代码为：

$("#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在后面需要加上这段代码。

3.2 隐藏列

1）模板设计

在A1单元格中添加一个控件，控件类型选择为按钮类型，按钮名称为点击隐藏B、C两列，如下图所示：

222

2）添加点击事件

给按钮控件增加点击事件，如下图所示：

222

js代码如下：

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

注：上边的js中隐藏的列数可以自己进行修改的，B、C列只是例子。

4. 预览效果

4.1 PC端预览效果

保存模板，选择填报预览，效果如下图：

1）隐藏行

222

2）隐藏列

4.2 移动端预览效果

注：此JS不支持移动端使用

5. 已完成模板

1）隐藏行

模板效果在线查看请点击：JS隐藏行或列示例一.cpt

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

点击下载模板

2）隐藏列

模板效果在线查看请点击：JS隐藏行或列示例二.cpt

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

点击下载模板

主题：

标签：已验证 9.0验证