摘要:移動端報表使用方法安裝好插件后,在瀏覽器中調用時,需要在報表路徑后面加上參數。另外移動端的插件,圖表是只支持顯示新圖表。
HTML5報表插件安裝及使用編輯
插件安裝
插件網址以及設計器插件安裝方法和服務器安裝插件的方法可以官網上面搜索,這里就不做詳細介紹了。
移動端HTML5報表使用方法
安裝好插件后,在瀏覽器中調用時,需要在報表路徑后面加上參數op=h5。但是PC端不完全支持H5效果。
移動端添加參數前后效果:
fs上掛報表的時候不用帶參數,會自動識別是不是在手機上訪問的。另外移動端的H5插件,圖表是只支持顯示新圖表。
Html5報表制作及手機效果編輯
手機頁面大小
制作手機上的報表與PC端報表制作過程是一樣的,為了讓用戶制作出適合手機尺寸的報表,在模板>頁面設置>紙張大小的地方,可以選擇手機紙張大小,如下圖:
報表參數界面的顯示效果
html5報表在手機上顯示時,參數界面和PC端不一樣,而是一個新的頁面,頁面的控件會自動布局,從上到下依次顯示,根據參數界面>移動端顯示列表中的順序來顯示:
效果如下圖:
H5報表自適應
h5模板自適應的時候,點擊模板>移動端屬性,設置【豎屏】-【橫向自適應】,效果會比較好看,如果有超出部分則分頁顯示,可以通過下方工具欄的翻頁按鈕進行翻頁。
Html5報表支持功能點列表編輯
注意:使用新版本要求服務器jar包時間為6月8日或更新,新特性圖表插件版本為V7.2版本以上的
目前Html5報表支持如下功能:
1、Html5報表暫時支持普通分頁預覽,填報預覽、數據分析還不支持
2、報表參數界面與正文分離,提供良好的用戶體驗
3、報表正文在不同的設備上會進行自適應
4、報表工具欄上提供左右箭頭可以進行翻頁、點擊頁碼可以進行快速翻頁
5、支持所有類型圖表的基本展現,可以在圖表上進行穿透鉆取,有數據點提示
6、報表正文單元格支持鉆取
7、支持基礎控件:文本、下拉框、單選按鈕組、復選框組、日期、按鈕
8、支持表單模板的展現,并且可以有保留布局與自動重布局兩種選擇,可以快速制作精美的報表頁面
9、支持pc、phone、pad上顯示的目錄結構不同,用戶在pc上看到的報表目錄結構和手機上看到的目錄結構可以設置成不同
10、支持表單實現數據采集并提交入庫
11、參數界面優化,增加參數過濾快捷按鈕并支持直接返回目錄,及查詢前不顯示報表內容屬性
12、js緩存優化,提升展示性能
13、圖表性能優化
14、cpt報表縮放調整并支持是否啟用cpt報表的縮放
4、移動端手機報表制作時的屬性使用指南編輯
隨著表單保留布局及自適應布局功能的發布,在設計手機報表的時候,會用到的屬性也增加了好幾個,雖然屬性的控制可以讓設計的時候更靈活,但是確無疑會增加設計的難度。我們也在想方設法的讓設計的時候更簡單,與此同時,也將相關的屬性以及用法在此做一個說明,讓大家的用的時候能夠更加清晰。
(1)表單body屬性中新增“手機重布局”屬性
手機重布局這個屬性只針對手機,pc和pad上面始終是原始布局。這個就是是否要在手機顯示的時候保留布局的開關,默認情況下是重布局的唷,即組件是依次往下顯示,一行只會有一個組件唷,如果想手機上顯示的時候就按照設計的布局來的話,記得勾選。
(2)表單中報表塊屬性中新增“手機顯示限制高度”屬性及高度的設置
這個通常使用默認的就可以了,有了這個屬性,你的報表塊設計的時候可以不需要去考慮最終的高度,在手機上面,報表塊的高度會根據報表最終擴展出來的內容高度自動變化。
當然這個屬性有一定的局限性,就是如果你設置保留設計時候的布局,報表塊旁邊又有其他控件比如右邊有個圖表,那報表塊高度就不會自動改變,設計時的比例是什么樣的就是什么樣的。
最后報表塊如果設置了限制高度的話,高度的設置為屏幕高度的比例值,我們這邊考慮到報表的滑動,所以報表塊限制高度時最大占屏幕高度的0.8,如果大家在實際使用時,覺得比例不合適也可以及時反饋給我們。
(3)表單body屬性中的“組件縮放”
表單body中自適應布局方式還有一個屬性“組件縮放”,大家也要關注一下,這個默認是“雙向自適應”,如果你的報表只在pc上看,設置為“雙向自適應”是非常合適的,但是如果是手機上看,就不太合適,所以如果是要兼顧手機端顯示的話,“組件縮放”屬性最好設置為“橫向自適應”會比較好。
設置為自適應布局并且“雙向自適應”的話,你的報表在手機上也會壓縮到一個手機屏幕,每個組件都會按照設計的比例擠壓顯示,這個時候報表塊的顯示高度限制也就沒啥用了。
文章版權歸作者所有,未經允許請勿轉載,若此文章存在違規行為,您可以聯系管理員刪除。
轉載請注明本文地址:http://specialneedsforspecialkids.com/yun/82548.html
摘要:描述連接多維數據庫,首先要通過數據連接將多維數據庫與連接起來,然后在數據連接的基礎上新建多維數據庫數據集,用于模板設計。詳細設置查看連接數據連接建立好之后,就可以添加多維數據庫數據集。 1. 描述FineReport連接多維數據庫,首先要通過數據連接將多維數據庫與FineReport連接起來,然后在數據連接的基礎上新建多維數據庫XMLA數據集,用于模板設計。2.XMLA數據連接2.1描...
摘要:和的關系不是一項技術,也不是一個框架,我們可以把她理解為一種模式,一種通過應用一些技術將在安全性能和體驗等方面帶來漸進式的提升的一種的模式。這里需要注意的是,首次注冊線程的頁面需要再次加載才會受其控制。 1. PWA和Service Worker的關系 PWA (Progressive Web Apps) 不是一項技術,也不是一個框架,我們可以把她理解為一種模式,一種通過應用一些技...
摘要:和的關系不是一項技術,也不是一個框架,我們可以把她理解為一種模式,一種通過應用一些技術將在安全性能和體驗等方面帶來漸進式的提升的一種的模式。這里需要注意的是,首次注冊線程的頁面需要再次加載才會受其控制。 1. PWA和Service Worker的關系 PWA (Progressive Web Apps) 不是一項技術,也不是一個框架,我們可以把她理解為一種模式,一種通過應用一些技...
閱讀 2256·2021-11-25 09:43
閱讀 3123·2021-10-14 09:42
閱讀 3484·2021-10-12 10:12
閱讀 1526·2021-09-07 10:17
閱讀 1901·2019-08-30 15:54
閱讀 3181·2019-08-30 15:54
閱讀 1550·2019-08-30 15:53
閱讀 1907·2019-08-29 11:21