1. 概述
1.1 版本
报表服务器版本 | 移动端版本 | 功能变动 |
---|---|---|
11.0.7 | 11.0.70 | 新增样式属性 style |
1.2 应用场景
样式属性 style,JS 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