JS實現儲存格背景圓角

1.1 版本

1.2 預期效果

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

1.3 實現思路

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

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

注：儲存格必須有背景

2.1 開啟範本

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

2.2 新增事件

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

JavaScript 程式碼如下：

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

2.3 效果預覽

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

注：不支援行動端

3.1 開啟範本

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

3.2 新增背景

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

3.3 新增事件

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

JavaScript 程式碼如下：

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

3.4 效果預覽

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

注：不支援行動端

點選下載範本：

儲存格圓角-整列.cpt

儲存格圓角-整欄.cpt

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

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