1 概述
筛选器组件主要包括以下类型:单选列表、多选列表、单选下拉、多选下拉、单选输入框、多选输入框、日期、年、年季、年月、年周、时间和日期时间,您可根据实际业务场景选择合适的筛选器组件类型。
本文仅介绍各筛选器类型的特有功能,筛选器组件创建及通用功能详情可参考 创建筛选器组件、筛选器组件基础功能 。
2 列表筛选器
列表筛选器包括单选和多选两种形式,一般适用于备选值较少的场景。
2.1 展示效果
筛选器类型 | 说明 | 示例效果 | |
---|---|---|---|
单选列表 | 筛选器的备选值以单选列表的形式展示,每次只能选择一个值筛选数据。 | ||
多选列表 | 筛选器的备选值以多选列表的形式展示,每次支持连续选择多个值筛选数据。 |
2.2 选择筛选值
列表筛选器备选值最多只能显示前100行,当数据量超过100行时,建议使用下拉或输入框筛选器。
- 单选列表选择 全部 时,是查询所有数据
- 多选列表选择 全选 时,因只勾选了前100行的值,所以只查询前100行的值去过滤数据
在 筛选器设置 中可设置是否在备选值中显示 全部/全选 选项,详情可参考 筛选器备选值 。
2.3 属性设置
在组件设置的属性中,可对列表筛选器修改样式效果,样式设置包括:名称、每行列数、滚动条、风格。
1、名称 是筛选器组件的通用设置项,详情可参考 筛选器组件通用样式设置 。
2、每行列数 是设置备选值列表要分为几列展示,效果如下图所示:
3、滚动条 是指当列表备选值过多时,可设置筛选器组件内部是否显示滚动条。
组件高宽在某些临界值时刚好出现了滚动条,但调整组件高宽比较难设置实现在不同显示设备都不显示滚动条,为了美观可通过此设置项设置隐藏组件内部的滚动条。
4、风格
列表样式筛选器支持设置两种风格:选框和按钮,默认效果为 选框 。
(1)选框风格支持设置选框颜色和文字样式,以多选列表为例,设置项及效果如下图所示:
(2)按钮风格样式设置分为:按钮组样式、按钮默认样式和按钮选中样式 三类,包括设置圆角、间隔、宽度、边框等样式,
以单选列表为例,设置项及效果如下图所示:
样式 | 设置项 | 效果图 |
---|---|---|
默认 | 按钮风格默认的样式效果。 | |
自定义 | 圆角 设置所有按钮平铺后四周的圆角。 | |
边框 设置所有按钮平铺后整体的边框样式。 | ||
选项 设置单个按钮的边框、高宽和颜色等。 | ||
高亮选项 设置选中按钮时的背景色和文字样式。 |
3 下拉筛选器
下拉筛选器包括单选和多选两种形式,一般适用于备选值较多、控件展示空间较小的场景。
3.1 展示效果
筛选器类型 | 说明 | 示例效果 | |
---|---|---|---|
单选下拉 | 筛选器的备选值以单选的下拉框形式展示,每次只能选择一个值筛选数据。 | ||
多选下拉 | 筛选器的备选值以多选的下拉框形式展示,每次支持连续选择多个值筛选数据。 |
3.2 选择筛选值
1、下拉筛选器备选值只显示前100行,100行后的数据可通过搜索选择。
2、全部
(1)下拉筛选器在 筛选器设置 中可设置在备选值中是否显示 全部 选项,详情可参考 筛选器备选值 。
(2)选择 全部 时,是查询所有数据。
3、部分选择
如果先选择 全部 ,再取消选择某些项,此时下拉筛选器会显示 部分选择 ,代表过滤数据时仅排除这些被取消的项。比如 订单编号 筛选器的操作符是 包含 ,先选择 全部 ,此时查询结果是获取全部数据。再取消选择某些项,此时下拉筛选器显示 部分选择 ,筛选条件是不包含被取消的项。
3.3 属性设置
在组件设置的属性中,可对下拉筛选器修改样式效果,属性设置包括:名称、控件和自定义值。
1、其中 名称 和 控件 是筛选器组件的通用设置项,详情可参考 筛选器组件通用样式设置 。
2、自定义值 指是否允许用户使用自定义的值作为筛选值。
设置为 允许 时,在筛选器文本框中输入任意一个不存在于备选值中的值,如输入“test数据”,可将所输入文本作为筛选值使用。
4 输入框筛选器
输入框筛选器包括单选和多选两种形式,输入框筛选器是通过手动输入关键字去筛选数据,一般适用于备选值较多,且对要筛选的内容比较明确,不需要利用列表/下拉筛选器获取全量信息才能勾选的场景。
4.1 展示效果
筛选器类型 | 说明 | 示例效果 | |
---|---|---|---|
单选输入框 | 单选输入框筛选器不支持通过逗号、分号等分隔符,分别查询多个值,所有输入内容作为一个整体去过滤数据。 | 下图中,城市筛选器的操作符是 模糊匹配 ,输入关键字 京 ,此时会查询出所有城市名字中含 京 的城市。 | |
多选输入框 | 多选输入框筛选器支持通过换行符、英文逗号分隔符,分别查询多个值。 限制最多可查询1000个值。 | 下图中,城市筛选器的操作符是 模糊匹配 ,输入关键字 京,海,南,此时会查询出所有城市名字中含 京,海,南 的城市。 |
4.2 属性设置
在组件设置的属性中,可对输入框筛选器修改样式效果,属性设置包括:名称、控件和数据类型。
1、其中 名称 和 控件 是筛选器组件的通用设置项,详情可参考 筛选器组件通用样式设置 。
2、数据类型 设置项是控制输入内容的数据类型,主要是为了避免输入内容的数据类型和筛选器绑定的字段数据类型不一样,在某些数据库中会出现查询异常。
数据类型支持设置为字符串、数字。如果设置数据类型为数字,而输入的内容是字符串时,会自动将内容替换成0。
4.3 筛选器设置
多选输入框特有设置:在筛选器设置中,可对 多选输入框筛选器 设置分隔符,默认“(新文本行)”、“,(逗号)”都勾选,“(新文本行)”不允许取消勾选,“,(逗号)”可以取消勾选。
5 日期类筛选器
一般适用于日期型、日期时间型和时间层次字段的筛选场景。
5.1 展示效果
日期类筛选器包括:日期、年、年季、年月、年周、时间和日期时间,根据筛选器类型不同下拉选择不同时间频度。
类型 | 说明 | 效果 |
---|---|---|
日期 | 以日期的形式展示,选择日期。 | |
年 | 根据所选的年份频度,自动筛选出对应日期范围内的数据。 | |
年季 | 根据所选的年份和季度,自动筛选出对应日期范围内的数据。 | |
年月 | 根据所选的年份和月份,自动筛选出对应日期范围内的数据。 | |
年周 | 根据所选的年份和周,自动筛选出对应日期范围内的数据。 | |
时间 | 以日期的形式展示,选择时间。 | |
日期时间 | 以日期的形式展示,选择日期和时间。 |
5.2 数据格式
日期类筛选器设置的数据格式需要和字段值的数据真实格式保持一致,才能筛选出正确的数据,各筛选器类型默认的数据格式如下所示:
筛选器类型 | 默认数据格式 | 示例 |
---|---|---|
日期 | yyyy-MM-dd | 2023-01-01 |
年 | yyyy | 2023 |
年季 | yyyyQ[1|2|3|4] | 2023Q1 |
年月 | yyyy-MM | 202301 |
年周 | yyyy-Ww | 2023W31 2023W1 |
时间 | HH:mm:ss | 19:08:11 |
日期时间 | yyyy-MM-dd HH:mm:ss | 2023-01-01 19:08:11 |
如果默认的数据格式和字段值的数据真实格式不一致时,可在 筛选器设置 中修改。下面通过一个简单的示例演示如何使用筛选器组件的数据格式设置功能。
1、前提条件:
(1)本示例中使用到的数据:wiki示例-产品明细数据.xlsx 。
(2)将上述数据导入到数据模型中,并保存该数据模型,功能详见:导入文件数据 。
(3)在仪表盘中创建组件时,业务数据集选择上述步骤2中创建的数据模型。
2、操作步骤
(1)创建一个 年周 筛选器组件,并绑定 日期(week)字段,效果如下图所示,筛选器组件和图表组件创建示例可参考 创建筛选器组件、 创建第一个可视化组件 。
(2)此时选择2017年第1周查询不出数据,因为字段值的数据真实格式是yyyy-ww,而年周筛选器默认数据格式是yyyy-Ww。
(3)选中年周筛选器组件,在组件数据中点击 筛选器设置 ,设置数据格式为 yyyy-ww ,点击 确定 。
数据格式可选内容是受日期控件类型影响的。
(4)此时再选择2017年第1周,能正常查询2017年第1周的数据。
5.3 属性设置
在组件设置的属性中,可对日期类筛选器修改样式效果,属性设置包括:名称和控件,详情可参考 筛选器组件通用样式设置 。