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

帆软报表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 列只是例子。

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

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

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

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

发布了36 篇原创文章 · 获赞 46 · 访问量 1万+

猜你喜欢

转载自blog.csdn.net/qq_31457413/article/details/99430675