JS實現儲存格背景圓角

1. 概述

1.1 版本

報表伺服器版本功能變更
11.0.10儲存格圓角API setCellRadius 變更為 setRadius,舊API仍然可以繼續使用,新API優化儲存格圓角,詳情可參見:表格物件API

1.2 預期效果

為了報表的美觀,在實際使用時通常對儲存格的背景進行圓角設定,可整列設定圓角,或整欄設定圓角,或給指定的儲存格設定圓角,如下圖所示:

1723624977735746.png

1723626091765528.png

1.3 實現思路

為儲存格新增背景,並使用 JS 程式碼新增載入結束事件,給報表第一欄設定 25 圓角。

11.0.10 及之後版本儲存格樣式相關 JS API可參考:表格物件API

注:儲存格必須有背景

2. 範例一

2.1 開啟範本

開啟範本:%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式報表.cpt

2.2 新增事件

菜單欄點選「範本>範本 Web 屬性>分頁預覽設定」,選擇「為該範本單獨設定」,然後新增「載入結束事件」,如下圖所示:

1723624425962368.png

JavaScript 程式碼如下:

_g().setRadius(35, {
row: [1,1],
}, false);

2.3 效果預覽

儲存範本,點選「分頁預覽」,效果如 1.2 節所示。

注:不支援行動端

3. 範例二

3.1 開啟範本

開啟範本:%FR_HOME%\webroot\WEB-INF\reportlets\demo\NewbieGuide\行式報表.cpt

3.2 新增背景

為表格的第一欄新增顏色背景,如下圖所示:

1723625635206274.png

3.3 新增事件

菜單欄點選「範本>範本 Web 屬性>分頁預覽設定」,選擇「為該範本單獨設定」,然後新增「載入結束事件」,如下圖所示:

1723625763857197.png

JavaScript 程式碼如下:

_g().setRadius(35, {
 column: [1,1], 
}, false);

3.4 效果預覽

儲存範本,點選「分頁預覽」,效果如 1.2 節所示。

注:不支援行動端

4. 範本下載

5. 注意事項

1)API產生效果的是將儲存格內的背景設定為圓角,因此儲存格背景需要設定為「顏色」、「紋理」、「圖案」、「圖片」、「漸變色」任意一個即可,如下圖所示:

1723626311530490.png

2)圓角設定的單位是 px ,圓角設定的最大值為短邊的一半(每個角最大顯示1/4個圓),例如儲存格的預覽像素是 60*80 ,則圓角設定的最大值設定為 30 。

附件列表


主題: 報表應用
  • 有幫助
  • 沒幫助
  • 只是瀏覽
中文(繁體)

滑鼠選中內容,快速回饋問題

滑鼠選中存在疑惑的內容,即可快速回饋問題,我們將會跟進處理。

不再提示

9s后關閉

獲取幫助
線上支援
獲取專業技術支援,快速幫助您解決問題
工作日9:00-12:00,13:30-17:30在线
頁面反饋
針對當前網頁的建議、問題反饋
售前咨詢
業務咨詢
電話:0933-790886或 0989-092892
郵箱:taiwan@fanruan.com
頁面反饋
*問題分類
不能為空
問題描述
0/1000
不能為空

反馈已提交

网络繁忙

反饋已提交

網絡繁忙