老版自適應
老版的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);
//賦值給隱藏的控件
demo與規范地址:https://github.com/lishan-13/FineReportDemo
更多內容敬請關注帆軟官方的幫助文檔:https://help.fanruan.com/finereport/