帆软FineReport决策报表Tab实现方案

最近有个需求是要做首页展示,为了减少前端工作量,利用采购的帆软FineReport来实现,记录过程,方便备查。

需求

做个Tab页,实现多个页切换。

方案一、利用帆软自带切换

帆软自带的有Tab控件,可实现切换,但样式似乎有点丑。从编辑栏,拖动Table块到编辑区。
在这里插入图片描述
选中Table的主体区域,点击右上角的加号,即可添加table页签。
在这里插入图片描述
点击预览,在浏览器中查看默认效果。
在这里插入图片描述

选中Tabpane 面板,在右侧模式模版可选择不同的样式,如卡片式、书签式、菜单式等。
在这里插入图片描述
效果如下图所示。该实现方案虽能调整Table页签按钮的位置,如靠右排列,并非水平居右。
在这里插入图片描述

方案二、自定义按钮切换
第一步、添加表格控件

添加报表控件作为按钮的载体,即在报表的表格中添加按钮。在相应的区域,输入文字作为按钮的名字。
在这里插入图片描述
点击 文字 添加 JavaScript脚本,即编写获取控件的事件。
在这里插入图片描述
原理:获取tableplane的控件,利用 showCardByIndex方法控制其显示,注意其从0开始,即0表示第一个页签。分别对三个按钮添加事件,如第一个页签 按订单按钮 添加的内容如下所示。

_g().getWidgetByName("tabpane0").showCardByIndex(0);

预览后,点击对应的按钮,下方自带的Table页签会跟着变动。
在这里插入图片描述
原有页签的隐藏,只需选中 tablepane控件,在右侧 修改控件大小为0即可。
在这里插入图片描述
页面预览,原有的页签便已经隐藏。报表控件的位置可以根据需要自由移动,弥补自带的页签无法右对齐的缺点。
在这里插入图片描述
以上即两种Table页签的实现方式,根据不同的需要使用即可。

  • 0
    点赞
  • 2
    收藏
    觉得还不错? 一键收藏
  • 2
    评论
评论 2
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

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

抵扣说明:

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

余额充值