表格
本节主要介绍 AppStudio 控件库里的表格控件。
属性
CloudPSS 提供了一套统一的控件属性参数
通用样式
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 是否隐藏 | hidden | 选择是否隐藏控件 | 选择 | 选择隐藏或者显示，隐藏当前控件，或者显示当前控件，默认为显示状态 | |
| 透明度 | style/opacity | 输入透明度 | 常量 | 输入透明度值，控件按照透明度值变化，范围为0~1 ，默认为 1 |
表头样式
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 高度 | styleOption/headerHeight | 表头高度 | 常量 | 输入表头高度，默认 20 | |
| 背景颜色 | style/--cwe-custom-table-thead-background-color | 输入背景颜色 | 常量 | 输入背景颜色，默认为 #fafafa | |
| 文字字体 | style/--cwe-custom-table-head-font-family | 选择文字字体 | 选择 | 文字字体样式，字体类型包括：默认、宋体、黑体、楷体、微软雅黑、Georgia、Palatino Linotype、Times New Roman、Arial、Arial Black、Verdana、Courier New、Trebuchet MS | |
| 文字间距 | style/--cwe-custom-table-head-letter-spacing | 输入文字间距 | 常量 | 文字间距 | |
| 文字字号 | style/--cwe-custom-table-head-font-size | 输入文字字号 | 常量 | 输入文字字号 | |
| 文字颜色 | style/--cwe-custom-table-head-color | 选择文字颜色 | 颜色选择器 | 点击文字颜色，弹出颜色选择器自定义颜色 | |
| 文字粗细 | style/--cwe-custom-table-head-font-weight | 选择文字粗细 | 选择 | 选择文字粗细，默认、100、200、300、400、500、600、700、800、900、1000 | |
| 边框宽度 | style/--cwe-custom-table-head-border-weight | px | 边框宽度 | 常量 | 边框宽度，默认为 1px |
| 边框颜色 | style/--cwe-custom-table-head-border-color | 边框颜色 | 常量 | 边框颜色，默认为 #e8e8e8 | |
| 边框类型 | style/--cwe-custom-table-head-border-style | 边框类型 | 选择 | 边框类型分为：默认、无边框、虚线边框、实线边框、双重边框、3D 沟槽边框、3D 脊边框、3D 突出边框、3D 嵌入边框，默认为实线边框 |
表格体样式
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 背景颜色 | style/--cwe-custom-table-tbody-background-color | 输入背景颜色 | 常量 | 输入背景颜色，默认为 #FFFFFF00 | |
| 文字字体 | style/--cwe-custom-table-cell-font-family | 选择文字字体 | 选择 | 文字字体样式，字体类型包括：默认、宋体、黑体、楷体、微软雅黑、Georgia、Palatino Linotype、Times New Roman、Arial、Arial Black、Verdana、Courier New、Trebuchet MS | |
| 文字间距 | style/--cwe-custom-table-cell-letter-spacing | 输入文字间距 | 常量 | 文字间距 | |
| 文字字号 | style/--cwe-custom-table-cell-font-size | 输入文字字号 | 常量 | 输入文字字号 | |
| 文字颜色 | style/--cwe-custom-table-cell-color | 选择文字颜色 | 颜色选择器 | 点击文字颜色，弹出颜色选择器自定义颜色 | |
| 文字粗细 | style/--cwe-custom-table-cell-font-weight | 选择文字粗细 | 选择 | 选择文字粗细，默认、100、200、300、400、500、600、700、800、900、1000 | |
| 边框宽度 | style/--cwe-custom-table-cell-border-weight | px | 边框宽度 | 常量 | 边框宽度，默认为 1px |
| 边框颜色 | style/--cwe-custom-table-cell-border-color | 边框颜色 | 常量 | 边框颜色，默认为 #e8e8e8 | |
| 边框类型 | style/--cwe-custom-table-cell-border-style | 边框类型 | 选择 | 边框类型分为：默认、无边框、虚线边框、实线边框、双重边框、3D 沟槽边框、3D 脊边框、3D 突出边框、3D 嵌入边框，默认为实线边框 |
行样式
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 高度 | styleOption/cellHeight | 表头高度 | 常量 | 输入表头高度，默认 20 |
内容
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 列定义 | columnDefinitionlist | 列定义 | 表格 | 点击 编辑数据，弹出控件列定义内容表格 | |
| 值 | dataJsonString | 列定义 | 表格 | 点击 编辑数据，弹出控件值内容表格（JSON 格式） |
事件
| 参数名 | 键值 (key) | 单位 | 备注 | 类型 | 描述 |
|---|---|---|---|---|---|
| 切换 | @change | 当选中状态变化时触发 | 函数 | 采用更新方式触发函数，当选中状态变化时触发，必须设置自动切换选项 |
案例介绍
颜色选择器类型
点击控件属性右侧的颜色选择器，弹出如下显示的界面
-
界面上方是预设的多种主题颜色，允许用户快速选择所需颜色；
-
中间是自定义颜色选择区允许用户点击选择所需的颜色，右侧是选择颜色透明度；右下角是取色器，点击允许用户在任意界面选取所需颜色
-
最下方显示的是当前已选的颜色；默认为空，显示如下图的斜杠
选择主题色中的透明色
f(x) 模式下的颜色选择器
点击 fx 按钮，在输入框内输入颜色字符串，支持 hex、rgb、hsl 格式，具体参考 颜色码表
常见问题
- 什么是事件触发机制？
-
AppStudio 场景标签页内控件的属性有两种输入模式，一种是 (x) 值输入模式，另一种是 f(x) 表达式输入模式。 值输入模式是通过在属性框内直接输入值来配置控件属性，表达式输入模式则是在属性框内输入由变量/函数资源键名、控件属性键名构成的 math.js 表达式，通过表达式解析器计算出表达式的值来配置控件属性值。详情参见 控件属性的表达式输入
- (x) 与 f(x) 的区别
-
事件是指对控件操作后产生的效果，事件触发使用 HTML 元素事件触发的回调函数结合 math.js 的表达式解析器进行控件属性或者资源的调用。详情参考 事件触发机制