页面树结构

版本比较

标识

  • 该行被添加。
  • 该行被删除。
  • 格式已经改变。

1 概述

筛选器组件主要包括以下类型:单选列表、多选列表、单选下拉、多选下拉、输入框、日期、年、年季、年月、年周、时间和日期时间,您可根据实际业务场景选择合适的筛选器组件类型。

本文仅介绍各筛选器类型的特有功能,筛选器组件创建及通用功能详情可参考 创建筛选器组件筛选器组件基础功能

2 列表筛选器

列表筛选器包括单选和多选两种形式,一般适用于备选值较少的场景。

2.1 展示效果

筛选器类型说明示例效果
单选列表筛选器的备选值以单选列表的形式展示,每次只能选择一个值筛选数据。

多选列表筛选器的备选值以多选列表的形式展示,每次支持连续选择多个值筛选数据。

2.2 选择筛选值

列表筛选器备选值最多只能显示前100行,当数据量超过100行时,建议使用下拉或输入框筛选器。(有BUG,要替换图片 SMS-46092)

...

筛选器设置 中可设置是否在备选值中显示 全部/全选 选项,详情可参考 筛选器备选值 。

2.3 属性设置

在组件设置的属性中,可对列表筛选器修改样式效果,样式设置包括:名称、每行列数、滚动条、风格

...

样式设置项效果图
默认

按钮风格默认的样式效果。

自定义

圆角 设置所有按钮平铺后四周的圆角。

边框 设置所有按钮平铺后整体的边框样式。

选项 设置单个按钮的边框、高宽和颜色等。

高亮选项 设置选中按钮时的背景色和文字样式。

3 下拉筛选器

下拉筛选器包括单选和多选两种形式,一般适用于备选值较多、控件展示空间较小的场景。

3.1 展示效果

筛选器类型说明示例效果
单选下拉筛选器的备选值以单选的下拉框形式展示,每次只能选择一个值筛选数据。

多选下拉筛选器的备选值以多选的下拉框形式展示,每次支持连续选择多个值筛选数据。

3.2 选择筛选值

1、下拉筛选器备选值只显示前100行,100行后的数据可通过搜索选择。

...

如果先选择 全部 ,再取消选择某些项,此时下拉筛选器会显示 部分选择 ,代表过滤数据时仅排除这些被取消的项。比如 订单编号 筛选器的操作符是 包含 ,先选择 全部 ,此时查询结果是获取全部数据。再取消选择某些项,此时下拉筛选器显示 部分选择 ,筛选条件是不包含被取消的项。

3.3 属性设置

在组件设置的属性中,可对下拉筛选器修改样式效果,属性设置包括:名称、控件和自定义值

...

设置为 允许 时,在筛选器文本框中输入任意一个不存在于备选值中的值,如输入“test数据”,可将所输入文本作为筛选值使用。

4 输入框筛选器

输入框筛选器是通过手动输入关键字去筛选数据,一般适用于备选值较多,且对要筛选的内容比较明确,不需要利用列表/下拉筛选器获取全量信息才能勾选的场景。

4.1 展示效果

下图中,城市筛选器的操作符是 模糊匹配 ,输入关键字 ,此时会查询出所有城市名字中含 的城市。

...

信息

输入框筛选器不支持通过逗号、分号等分隔符,分别查询多个值,所有输入内容作为一个整体去过滤数据。

4.2 属性设置

在组件设置的属性中,可对输入框筛选器修改样式效果,属性设置包括:名称、控件和数据类型

...

数据类型支持设置为字符串、数字。如果设置数据类型为数字,而输入的内容是字符串时,会自动将内容替换成0。

5 日期类筛选器

一般适用于日期型、日期时间型和时间层次字段的筛选场景。

5.1 展示效果

日期类筛选器包括:日期、年、年季、年月、年周、时间和日期时间,根据筛选器类型不同下拉选择不同时间频度。

类型说明效果
日期以日期的形式展示,选择日期。

根据所选的年份频度,自动筛选出对应日期范围内的数据。

年季根据所选的年份和季度,自动筛选出对应日期范围内的数据。

年月根据所选的年份和月份,自动筛选出对应日期范围内的数据。

年周根据所选的年份和周,自动筛选出对应日期范围内的数据。

时间以日期的形式展示,选择时间。

日期时间以日期的形式展示,选择日期和时间。

5.2 数据格式

日期类筛选器设置的数据格式需要和字段值的数据真实格式保持一致,才能筛选出正确的数据,各筛选器类型默认的数据格式如下所示:

...

(4)此时再选择2017年第1周,能正常查询2017年第1周的数据。

5.3 属性设置

在组件设置的属性中,可对日期类筛选器修改样式效果,属性设置包括:名称和控件,详情可参考 筛选器组件通用样式设置

...