帆软报表JS实现隐藏行列(内容伸缩)

本文介绍如何使用JS代码在帆软报表中实现行列隐藏,通过按钮点击事件控制行(如40-50行)和列(B、C列)的显示与隐藏,提升页面整洁度。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

帆软报表JS实现隐藏行列(内容伸缩)

描述:

在最近的开发过程中,碰见一个需求,用户需要定制一个页面,需要能够实现行伸缩,使页面变得整洁,明了,具体实现过程如下:

处理思路:

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

操作步骤:

在合适的位置,插入按钮控件,然后可以自定义一个漂亮的图标。添加事件,点击。然后插入如下JS:

影藏行:
JS 代码为:
隐藏40-50行,代码如下:
$("#r-39-0").toggle();
$("#r-40-0").toggle();
$("#r-41-0").toggle();
$("#r-42-0").toggle();
$("#r-43-0").toggle();
$("#r-44-0").toggle();
$("#r-45-0").toggle();
$("#r-46-0").toggle();
$("#r-47-0").toggle();
$("#r-48-0").toggle();
KaTeX parse error: Expected 'EOF', got '#' at position 3: ("#̲r-49-0").toggle…editor) {
contentPane.curLGP.KaTeX parse error: Expected 'EOF', got '}' at position 23: …toggle(); }̲ 注:8.0 中可以不…editor) { contentPane.curLGP.$editor.toggle(); }这段 JS 代码,6.5 和 7.0 在后面需要加上这段代码。

隐藏列:

JS 代码如下:
$("td[id^='B']").toggle();//隐藏B列  
$("td[id^='C']").toggle();//隐藏C列
注:上边的 JS 中隐藏的列数可以自己进行修改的,B、C 列只是例子。

最终实现效果如下,可以点击按钮图标,实现伸缩页面中的制定内容:

缩起状态:
在这里插入图片描述
展开状态:

在这里插入图片描述
总结:

这种场景在出报告的时候经常容易碰到,目前任然还有一个需求,就是初始化之后为收缩状态,后续我将继续更新本帖!

评论 3
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值