1. 概述
1.1 版本
| 報表伺服器版本 | 行動端版本 | 功能變動 |
|---|---|---|
| 11.0.7 | 11.0.70 | 新增樣式屬性 style |
1.2 應用場景
樣式屬性 style，JS API 中有樣式參數的API中使用，符合 css 的規範，用來設定邊框、顏色、文字等樣式。
如showToolTip(opts) 中用 style 來設定提示框的樣式、setStyle(opts) 中用 style 來設定儲存格的樣式。
支援的屬性見下表：
| 分類 | 欄位 | 樣式說明 | 是否支援行動端 |
|---|---|---|---|
正文樣式 | fontWeight | 字體粗細 | 否 |
| fontStyle | 字體樣式 | 否 | |
| fontFamily | 字體 | 否 | |
| fontSize | 字號 | 是 | |
| color | 字體顏色 | 是 | |
| lineHeight | 正文高度 | 否 | |
| 邊框樣式 | border | 上下左右邊框 | 是 |
| borderTop | 上邊框 | 是 | |
| borderBottom | 下邊框 | 是 | |
| borderLeft | 左邊框 | 是 | |
| borderRight | 右邊框 | 是 | |
對齊方式 注：普通報表不支援對齊方式屬性 | padding | 內邊距 | 是 |
| paddingTop | 頂部填充 | 是 | |
| paddingBottom | 底部填充 | 是 | |
| paddingLeft | 左縮排 | 是 | |
| paddingRight | 右縮排 | 是 | |
| lineHeight | 正文行高/行間距 | 否 | |
| verticalAlign | 儲存格內元素垂直對齊方式 | 是 | |
| textAlign | 正文水平對齊方式 | 是 |
2. 範例
1）使用 setStyle(opts) 給將決策報表中 report0 報表塊 A1 儲存格的字體設定為紅色、粗體、14 號：
_g().getWidgetByName('report0').getCell(1,1).setStyle({
fontSize: "xx-large",
color: 'red'
});
使用在範本中時，如點選按鈕修改儲存格的樣式：
點選可下載範本：获取单元格后修改单元格样式.frm
2）使用 showToolTip(opts) 給決策報表中 report0 報表塊設定一個字體粗體、字號 14、字體為“華文隸書”的提示框：
_g().getWidgetByName('report0').showToolTip({
show: true, // 是否會出現彈窗
style: { // 可選欄位，不指定為預設樣式，支援css標準樣式的欄位
fontWeight:'900',
fontStyle:'italic',
fontFamily: '華文隸書',
fontSize: 'x-large'
//符合css規則
}
});
使用在範本中時，如給表格設定一個提示框：
點選可下載範本：鼠标悬浮单元格图片提示.frm
