子项表格组
文档基于基本柱状图v1.0.0版本
组件说明
子项表格组在轮播表格组件的基础扩展而来。相比于轮播表格，子项表格组增加了子项内容，通过轮播动画的方式，将子项数据信息以列表的形式展示在可视化应用中。
效果案例
*子项表格组 效果案例
一、样式
在样式中可以设置组件的基本属性、全局、行配置、列配置和子项配置。
1、基本属性
位置尺寸
位置包括组件的横坐标和纵坐标，单位为px；横坐标为组件左上角距离页面左边界的像素距离，纵坐标为组件左上角距离页面上边界的像素距离。
尺寸包括组件的宽度和高度，单位为px；可单击比例锁锁定组件宽高比，等比例调整组件的宽高，比例锁默认不锁定。
子项表格组件尺寸不影响组件内容显示、组件动画。
*组件位置尺寸说明
默认隐藏
勾选之后在初始加载时组件默认隐藏且关闭回调触发，通常用来配合显隐控制，如【选项卡】组件进行显隐切换。
2、全局
行数
默认显示5行数据，在此可自由配置显示数据行数。
行间距
数据行之间间距。
子项展开
展开方式有两种：自动轮播、手动点击。
*子项展开类型配置项说明
子项展开-自动轮播配置项说明：
配置项 | 说明 |
间隔时长 | 轮播动画时间间隔。 |
展开动画时长 | 展开动画的时长。 |
子项展开-手动点击配置项说明：
默认展开勾选
展开动画时长默认为1s
滚动条
用户可以自定义选择是否显示滚动条
配置项 | 说明 |
轨道 | 对轨道粗细、颜色、圆角进行设置 |
滑块 | 对滑块的粗细、颜色、圆角进行设置 |
3、行配置
表头
如下示例图所示，表头内是配置轮播表格内表头的配置项。分为表头行高、文本样式、对齐方式和背景四项。
*表头配置项
行高
即设置表头行高值。
文本样式
配置序号列中文本的样式，可配置文本字体大小、颜色、粗细及字体。
配置项 | 说明 |
大小 | 配置文本的大小 |
颜色 | 配置文本的颜色 |
字体粗细 | 配置文本的粗细 |
字体 | 配置文本的字体 |
对齐方式
表头内数据对齐方式，分为左对齐、右对齐和居中对齐、跟随列四种方式。
背景
表头背景当前有颜色、自定义两种背景填充方式方式。
纯色
设置单一纯色。
自定义
可上传一张自定义图片。
行
针对数据行背景/子项内容背景填充自定义配置。
行配置项说明：
配置项 | 配置项说明 |
行 | 此处的行非绝对数值，如下“行配置项示例图”所示，“行1”，因为只配置了3行，所以在第4行时仍然延续了“行1”的配置。 |
主背景/子项背景 | 对应行背景颜色/子项背景颜色，可配置为颜色和自定义，选择自定义时上传自定义图片即可。 |
描边 | 对应行描边线色彩及粗细。 |
圆角 | 数据行圆角值，如下“行配置项示例图”所示，“行2”圆角值配置为"57%"。 |
*行配置项示例图
4、列配置
序列号
轮播表格内序列号自定义配置项：
配置项 | 配置项说明 |
标题 | 默认为"排名"，可自定义为其他符号。 |
起始值 | 默认起始值为1，只能配置为数字。 |
列宽 | 序列号列列宽。 |
列间距 | 序列号列与最左侧组件边框间距。 |
对齐方式 | 分为左侧、居中和右侧三种对齐方式。 |
样式指定 | 可对特定序列号进一步进行配置，可配置文本样式、偏移量及背景，背景可填充颜色或自定义图片。 |
如下示例图所示将"2"序列号文本样式配置为背景填充红色。
*序列号配置项
列
组件默认显示三列数据，在此可对每一列进行自定义配置，如想增加一列数据，首先需要增加一列，然后在数据内增加对应列数据即可。
列配置项说明：
配置项 | 配置项说明 |
映射 | 在对接数据时需要进行字段映射，即把已有数据以映射的方式映射到组件字段，如需要增加一列“作者”，可配置字段名为"author"，显示名配置为“作者”。 |
列宽 | 指定列列宽度。 |
列间距 | 指定列与其他列列间距。 |
偏移 | 指定列列偏移量。 |
对齐方式 | 分为左侧、局中和右侧对齐三种方式。 |
内容类型
轮播表格内容支持文本、数字、图片，默认为文本。以下分别对不同状态进行介绍。
1. 文字
a.文字溢出
组件预置当数据长度较长无法显示完全时三种显示状态，换行、省略号、跑马灯。
当设置为跑马灯时可以设置文字滚动时间，时间越短速度越快。
b. 文本样式
可单独配置文本字体、大小、颜色、加粗、倾斜、字距和行距等。
2. 数字
小数位数 | 根据数据配置小数显示的位数 |
文本样式 | 配置数字文本样式，配置项包括字体、字体大小、颜色、加粗、倾斜、字距和行距。 |
后缀 | 后缀文本及文本样式。 |
千分位分割 | 开启千分位分割后可分割千分位后小数。 |
如下示例图所示，第3列为数字，对其样式配置为红色。
*数字类型样式指定
3. 图片
*图片类型相关配置项｜对应数据类型
数据源对应列数据为图片URL资源。
遮罩：
可上传图片遮罩调整图片形状，此处仅为图片遮罩，图片文件地址需要写在数据中。
*遮罩配置使用案例
5、子项配置
子项高度
设置子项的行高
子项内容
配置项 | 说明 |
映射 | 在对接数据时需要进行字段映射，即把已有数据以映射的方式映射到组件字段，如需要增加一个字段“销量”，可配置字段名为"sales"，显示名配置为“销量”。 |
位置 | 指定内容X、Y轴的位置 |
布局方式 | 设置左右、上下布局 |
内容类型
轮播表格内容支持文本、图片，默认为文本。以下分别对不同状态进行介绍。
1. 文字
a.宽度
设置文本宽度
b.对齐方式
分为左侧、局中和右侧对齐三种方式。
c.文本样式
可单独配置文本字体、大小、颜色、加粗、倾斜、字距和行距等。
d.文字溢出
组件预置当数据长度较长无法显示完全时三种显示状态，换行、省略号、跑马灯。
当设置为跑马灯时可以设置文字滚动时间，时间越短速度越快。
2.图片
*图片类型相关配置项｜对应数据类型
数据源对应列数据为图片URL资源。
遮罩：
可上传图片遮罩调整图片形状，此处仅为图片遮罩，图片文件地址需要写在数据中。
*遮罩配置使用案例
遮罩尺寸
调整遮罩的宽度、高度
二、数据
组件数据格式
字段 | 说明 |
name | 文本，第一列值。 |
value | 数值，第二列值。 |
publish | 文本，第三列值。 |
cover | 图片，子项内容。 |
author | 文本，子项内容。 |
isbn | 文本，子项内容。 |
translator | 文本，子项内容。 |
date | 文本，子项内容。 |
price | 文本，子项内容。 |
JSON数据案例
[
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
},
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
},
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
},
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
},
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
},
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
},
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
},
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
},
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
},
{
"name": "恶意",
"value": 100,
"publish": "南海出版公司",
"cover": "https://img3.doubanio.com/lpic/s3814606.jpg",
"author": "[日] 东野圭吾",
"isbn": "12345678907890",
"translator": "娄美莲",
"date": "2016-11-1",
"price": "39.50"
}
]数据配置项说明
配置项 | 说明 |
数据源 | 数据源类型、数据源选择等 |
数据过滤器 | 勾选启用数据过滤器，单击添加过滤器，可在设置数据源页面中配置数据过滤器，详情请参见数据过滤器使用说明 |
数据响应结果 | 展示数据请求的响应结果 |
自动更新 | 选中后可以设置数据请求时间间隔 |
数据对接详情
数据对接详情请见以下文档👇
三、交互
载入动画
所有组件均提供移入、移入(小)、划变三种组件载入动画。
载入动画选择无时，则组件没有载入动画。
载入动画仅在可视化应用预览、发布组件加载时显示。
载入动画配置项：
配置项 | 说明 |
渐隐渐显 | 启用是 |
速率 | 匀速、慢快慢(cubic-bezier(0.25,0.1,0.25,1))、低速开始、低速结束、低速开始和结束(cubic-bezier(0.42,0,0.58,1)) |
方向 | 动画方向 |
持续时间 | 载入动画持续时间，单位为ms |
延时 | 载入动画延时长，单位为ms |
回调参数
回调参数即为全局性的参数变量，用于控制组件之间参数的传递，可通过设置回调参数来实现数据驱动交互。
其中，字段值即参数变量，变量名即对字段值的重命名。
详细的回调参数教学👉 回调的使用
自定义事件
自定义事件为「交互事件」的增强模块，支持通过数据驱动组件状态、或变更组件样式配置，也可自定义编辑复杂的条件逻辑；
详细的自定义事件教学👉自定义事件教学
欢迎您在评论区留下您对该组件的意见，管理员会及时回复您，如长时间未回复欢迎您搜索钉钉群：33782396或者扫描以下二维码添加微信群 @谨禧 说出您的想法，采纳后将送出定制礼品。
也可以通过问卷来向我们反馈需求：https://jinshuju.net/f/XyCXU0