帆软报表之新自适应插件

老版自适应

老版的finereport制作报表比较麻烦，原理是将body设置为自适应布局，缩放方式通常选择横向自适应，在body中拖入绝对块固定位置然后在绝对块上拖入报表块制作自己开发的报表内容，但是会存在一个问题就是之前明明做好的报表下次打开之前的布局就变了！ 🌿（一种植物）

新版自适应

插件下载安装地址：https://help.fanruan.com/finereport/doc-view-3665.html

新版自适应完美解决了老版自适应问题，使得报表的开发效率大大提升

自适应优化流程

1.本地切换至默认目录后安装新自适应插件,重启设计器
2.打开旧模板后点击"转换新版"
3.调整模版自适应设置
根据需要调整缩放方式,长仪表板设置为横向自适应

4.把原先自适应设置的模版改为"绝对布局"

5.调整细节,如字体大小,间距等,还原视觉要求

大概制作方法为：拖入比你需要做的图表内容稍大的报表块作为背景，在背景块上面或者里面拖入组件来来实现你想要的效果，开发过程中只需要注意一点

就是规范，例如组件见的间距，字体颜色大小，图的色系等都需要保持一致！！！

新版的部分组件制作方法

1.筛选框的制作与特殊逻辑的实现

报表制作图与效果如下图：

====

其中日期区间，省市区等下拉框提示制作方法为在背景报表块里面提前写好就不用每次调整位置间距之类的如下

只需要将对应的组件放到报表上与提示文字对应的位置即可，这样就保证了间距的统一

1.1特殊逻辑实现

是这样的，我们希望在筛选框输入相应的省市区等信息后下面的查询指标不会跟着改变刷新数据，而是希望点击查询按钮后再刷新数据，做法是给对应的组件添加一个编辑结束事件return false;这样页面的信息就不会跟着刷新但是指标的查询值就找不到对应的信息了，所以需要设置一个隐藏组件（放在真实值的下面）来存储真实值，在点击查询后将页面显示的值传给隐藏的组件来完成指标的查询。事件如下

添加如下代码：

var prov_nm =_g().getWidgetByName('prov_nm').getValue();
var city_nm =_g().getWidgetByName('city_nm').getValue();
var dstc_nm =_g().getWidgetByName('dstc_nm').getValue();
//获取显示的省市区控件值
_g().getWidgetByName('prov_nm_c').setValue(prov_nm);
_g().getWidgetByName('city_nm_c').setValue(city_nm);
_g().getWidgetByName('dstc_nm_c').setValue(dstc_nm);
//赋值给隐藏的控件