JS实现隐藏tab块标题

矫情吗；* 2022-02-01 05:04 313阅读 0赞

1. 描述

用户希望可以自定义设置tab的展现与隐藏，比如不同用户可以查看不同的tab块，或者隐藏一些无关tab页的内容，该如何实现呢？

2. 思路

通过js隐藏tab标题。

注：通过js的方法，可能导致tab内部组件不能根据正确的宽高进行自适应，因此建议通过设计器自带属性——设置tabpane高度为0的方法，来实现隐藏。详情请参考：[tab布局][tab]第3.6章。

注：此功能不支持移动端和h5方式预览。

3. 操作步骤

3.1 示例一（隐藏整个tab标题）

1）打开模板

打开模板 %FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\demo\\analytics\\financial2\\生产库存分析.frm

2）添加初始化事件

在决策报表右上角控件设置中，选择tabpane0控件，添加初始化事件，如下所示：

![http://help.finereport.com/uploads/201808/20180813111958\_8153.png][http_help.finereport.com_uploads_201808_20180813111958_8153.png]

jar包在2018-1-24之前，所要添加的js如下：

![20190513152036832.png][]$('div:lt(1)',this.element.parent()).hide();*//**隐藏tab标题*

而jar包为2018-1-24及之后，隐藏tab标题的js代码如下：

![20190513152036839.png][]this.element.parent().hide();

注：是添加到tabpane块组件的初始化事件，不是tab块里面的每个tab页签的初始化事件。

3）效果预览

保存模板，预览效果如下：

![http://help.finereport.com/uploads/201808/20180813111958\_4616.jpg][http_help.finereport.com_uploads_201808_20180813111958_4616.jpg]

**3.2** **示例二（隐藏部分tab标题）**

1）添加初始化事件

以上面的模板为例，修改初始化事件，如下所示：

![http://help.finereport.com/uploads/201808/20180813111958\_4382.png][http_help.finereport.com_uploads_201808_20180813111958_4382.png]  
js代码如下：

![20190513152036854.png][]this.options.form.getWidgetByName("tabpane0").setTabVisible("tab1", false);

注：

要尽量避免重命的情况！若存在重名的tab，页面初始化的时候，后加载的tab会覆盖先加载的tab，所以js里获取到的，可能并不是预期要处理的tab。比如：模板里有两个tabpane0和tabpane1，页面加载的时候tabpane1是后加载的，那么你通过this.options.form.getWidgetByName("tabpane0").setTabVisible("tab2", false);获取到的tab2，其实最后会是tabpane1里的tab2，前面即使写获取的控件名为tabpane0也是无效的。

另外，用传统的写法是不支持tab隐藏的，比如：this.options.form.getWidgetByName("Tab0").setVisible();，这种传统写法只适合用于控制组件，比如report0这种报表块组件的隐藏与否。

注：当模板导出时，被隐藏的tab不会被导出！

2）效果预览

保存模板，预览效果如下：

![http://help.finereport.com/uploads/201808/20180813111958\_2902.jpg][http_help.finereport.com_uploads_201808_20180813111958_2902.jpg]

4. 预览效果

4.1 PC端预览效果

示例一：

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6cDY2Ng_size_16_color_FFFFFF_t_70][]

示例二：

![http://help.finereport.com/uploads/201808/20180813111958\_5246.jpg][http_help.finereport.com_uploads_201808_20180813111958_5246.jpg]

4.2 移动端预览效果

注：不支持移动端。

5. 已完成模板

1）示例一

模板效果在线查看请点击：[JS实现隐藏tab块标题-示例一.frm][JS_tab_-_.frm]

已完成的模板，可参见：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\JS\\表单JS实例\\12-JS实现隐藏tab块标题-示例一.frm

[右击存储模板][Link 1]

2）示例二

模板效果在线查看请点击：[JS实现隐藏tab块标题-示例二.frm][JS_tab_-_.frm 1]

已完成的模板，可参见：%FR\_HOME%\\webapps\\webroot\\WEB-INF\\reportlets\\doc\\JS\\表单JS实例\\12-JS实现隐藏tab块标题-示例二.frm

[右击存储模板][Link 2]

[tab]: http://help.finereport.com/doc-view-633.html
[http_help.finereport.com_uploads_201808_20180813111958_8153.png]: /images/20220201/d9ddd34f72aa48589e86461182bd4ea8.png
[20190513152036832.png]: /images/20220201/1fb781b278994dc2ae31d7a95c1f87e0.png
[20190513152036839.png]: /images/20220201/b783276f5e434c598bcde9e98608b3bf.png
[http_help.finereport.com_uploads_201808_20180813111958_4616.jpg]: /images/20220201/b76b262b9a3d468cb049c3e83d2f68aa.png
[http_help.finereport.com_uploads_201808_20180813111958_4382.png]: /images/20220201/6217400600da4fde954fe1bfabf2d6fb.png
[20190513152036854.png]: /images/20220201/421d56123f984fabb6956d7818ca3af8.png
[http_help.finereport.com_uploads_201808_20180813111958_2902.jpg]: /images/20220201/1c698cb47a4d4347a1bb1cef52bd41e9.png
[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L2h6cDY2Ng_size_16_color_FFFFFF_t_70]: /images/20220201/964149cb731d42dfa4789a334ea1b1d5.png
[http_help.finereport.com_uploads_201808_20180813111958_5246.jpg]: /images/20220201/8f2baeb28cd3482692602b9895eede2e.png
[JS_tab_-_.frm]: http://www.finereporthelp.com:8889/demo/ReportServer?formlet=doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/12-JS%E5%AE%9E%E7%8E%B0%E9%9A%90%E8%97%8Ftab%E5%9D%97%E6%A0%87%E9%A2%98-%E7%A4%BA%E4%BE%8B%E4%B8%80.frm
[Link 1]: http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/12-JS%E5%AE%9E%E7%8E%B0%E9%9A%90%E8%97%8Ftab%E5%9D%97%E6%A0%87%E9%A2%98-%E7%A4%BA%E4%BE%8B%E4%B8%80.frm
[JS_tab_-_.frm 1]: http://www.finereporthelp.com:8889/demo/ReportServer?formlet=doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/12-JS%E5%AE%9E%E7%8E%B0%E9%9A%90%E8%97%8Ftab%E5%9D%97%E6%A0%87%E9%A2%98-%E7%A4%BA%E4%BE%8B%E4%BA%8C.frm
[Link 2]: http://www.finereporthelp.com:8021/download/demo/9.0demo/doc/JS/%E8%A1%A8%E5%8D%95JS%E5%AE%9E%E4%BE%8B/12-JS%E5%AE%9E%E7%8E%B0%E9%9A%90%E8%97%8Ftab%E5%9D%97%E6%A0%87%E9%A2%98-%E7%A4%BA%E4%BE%8B%E4%BA%8C.frm