# SuperPage组件-字段过滤

SuperPage提供了字段过滤组件,用于过滤数据。在查看界面用户可以动态的添加过滤字段,以及切换查询的操作符等。如使用字段过滤筛选企业列表信息的数据:

字段过滤示例

示例地址:字段过滤 (opens new window)

# 使用字段过滤组件过滤数据

字段过滤组件过滤的是数据模型的数据,将作用到所有使用此数据模型的组件。使用时需要为字段过滤组件绑定数据模型,并搭配其他展示数据的组件一起使用。以搭配列表组件过滤企业基本信息为例,如下是具体操作步骤:

使用组件

  1. 使用字段过滤组件:在组件区>输入中将字段过滤组件拖入到布局中
  2. 绑定字段过滤数据并设置字段:在字段过滤>数据下选取添加的数据模型,并点击设置字段选择默认显示的字段及输入方式和操作符设置,见可选字段设置
  3. 设置自动过滤:在字段过滤>数据中勾选自动过滤
  4. 设置显示条件及操作符:在属性栏>字段过滤下可设置总是显示“并且”和“或”总是显示操作符,见运算条件设置操作符设置

# 字段过滤组件操作

在查看界面,可在字段过滤组件中修改操作符、运算条件、调整字段位置等:

设置组件

  • 添加字段:点击字段前后的空白位置或者点击添加按钮,可添加过滤字段,需要勾选允许动态添加条件,见动态添加条件设置
  • 删除字段:点击输入框右上角的功能按钮选择删除可删除字段,需要勾选允许动态添加条件,见动态添加条件设置
  • 切换操作符:点击字段输入框前的操作符或者输入框右上角的功能按钮可切换操作符,需要勾选允许切换操作符,见操作符设置
  • 调整字段位置:拖动字段即可调整字段位置
  • 修改”并且“和”或“关系”:点击关系符"并且"和“或”,可切换运算关系,当为“或”关系时,或条件的内容会用括号括起来,需要勾选允许“或”关系总是显示“并且”和“或”,见运算条件设置
  • 转换成表达式模式:当允许转成表达式模式时,点击表达式模式可输入复杂的过滤条件表达式进行过滤

# 查询模板设置

使用字段过滤组件可以灵活添加多个字段组合用于过滤数据。当同一个组合条件频繁使用时,可以将这个组合条件保存为查询模板,在下次使用时加载保存过的组合条件,提高查询效率。如查询企业信息为例:

查询模板

示例地址:企业信息自助查询 (opens new window)

# 保存为查询模板

点击保存查询模板,在弹出的对话框中输入模板名称,即可将条件组合保存为查询模板,具体的实现思路如下:

保存

  1. 准备一个数据模型:提前准备好,用于存放模板的数据。记录查询模板的数据模型结构至少需要包含:
    • 模板名称:在弹出对话框中输入的模板名称,一般建议带有业务意义的名称,方便下次使用
    • 字段过滤查询条件:用于存储选择的哪些字段条件,系统将字段条件以json数组的形式进行保存,建议数据长度设置大一些
    • 其它字段:其它需要存储到模型中的字段,例如企业查询1中,将输出数据项也保存在了模板中,示例企业查询1 (opens new window)
  2. 保存查询的模板:
    • 添加对话框组件:用于保存查询模板,包含一个文本输入组件用于输入模板名称,一个确定按钮组件提交数据,按照示例截图制作即可
    • 使用更新数据交互:设置按钮的交互动作,其中数据使用的是上面准备的数据模型。数据范围选择为当前查询结果,具体的字段信息可以在【更新字段设置】属性中处理,具体可以查看更新数据交互
  3. 添加一个按钮,用于点击弹出对话框保存查询模板

# 载入查询模板

点击载入查询模板按钮,在弹出对话框中选择对应的模板名称后即可载入对应的过滤条件进行过滤,具体的实现思路如下:

载入查询模板

  • 添加对话框组件:用户点击【载入查询模板】弹出该对话框,用于选择已存在的模板
    • 列表展示保存的模板:对话框需要使用列表展示已经存入的查询模板,具体可查看列表文档
    • 设置选中后的交互:在确定按钮上使用设置组件属性的交互,并设置交互的属性:
      • 选择组件:为对应的过滤条件组件,如【字段过滤1】
      • 属性名value
      • 属性值:获取的是存储字段过滤查询添加的列,使用SEEK()函数查询出对应查询模板字段中存储的json数组的值,如表达式为SEEK([列表2].[选中值].[字段过滤查询条件].[值],0
  • 添加一个按钮:用于点击弹出对话框载入查询模板

# 可选字段设置

属性栏>字段过滤中设置了数据属性后,会出现设置字段的选项。点击设置字段,在弹出的对话框中可以进行字段的设置,包括:字段列表设置字段属性设置输入方式设置

可选字段

# 设置可选的字段列表

字段过滤组件添加条件时,下拉列表自动显示了绑定数据集的所有字段,可以在设置字段对话框中进行设置调整:

  • 显示哪些字段:在对话框左侧可以添加、复制、删除和移动字段,添加、复制、删除和移动字段只是修改字段列表中选择的字段信息,不会对数据模型的结构发生变化

  • 默认显示的字段:添加的字段默认是不显示的,选中某个字段,在右侧的字段下,勾选默认显示即可。勾选后可设置默认值及操作符。操作符与字段类型相关:

    • 字符型:操作符包括等于包含匹配检索为空不为空开头是结尾是不等于不包含不匹配
    • 日期型:操作符包括属于不属于包含小于小于等于大于大于等于排除为空不为空
    • 数值型:操作符包括等于小于小于等于大于大于等于范围为空不等于不为空

TIP

当字段有关联表输入方式为下拉框时,操作符为属于不属于

# 字段属性设置

选择对应字段名称,在对话框右侧可设置字段属性,包含以下内容:

  • 字段:即当前字段在数据模型中对应的字段
  • 标题:字段的显示标题,可自定义
  • 输入方式:设置当前字段的输入方式,只有维度字段可设置,默认为自动
  • 默认显示:勾选默认显示后,在字段过滤中会显示默认当前字段,勾选默认显示后可设置默认值和默认操作符
  • 数据格式:即字段内容的显示格式,只有维度字段可设置,包含标题标题-值
  • 输入提示:当输入框的内容为空时,在输入框内显示的提示信息
  • 为空时包含所有值:当未输入内容时,即过滤所有数据
  • 校验:当为度量字段时,可对输入的数据进行校验,可设置校验公式校验提示

# 输入方式设置

选择对应字段名称,在对话框右侧字段属性中可设置每个字段的输入方式,包含以下几种方式:

  • 自动:默认为自动,根据字段类型自动判断为下拉框,日期,文本输入或数值,也可以手动设置
  • 下拉框:字段有关联表时可以选择,如【企业类型】。
    • 如果没有关联数据表,会将该字段数据去重后显示在下拉列表中。当输入方式为下拉框时,可设置允许多选显示“全部”允许清空,可参考文档下拉框-下拉框操作设置
    • 当字段存在关联表时,可设置选项的显示内容及节点属性,包括根节点是否显示根维项过滤显示最大级次,可参考文档下拉框
  • 日期:日期型的字段,或者设置了字段角色为日期
  • 文本输入:字段或文本型的字段,如【企业地址】
  • 数值输入:数值型的字段,输入框中只能输入数值,如【注册资本】

# 动态添加条件设置

属性栏>字段过滤下可设置动态添加条件,允许添加字段、添加“或”条件、以及转成表达式模式进行过滤:

动态添加

# 允许添加字段

勾选后在查看界面用户可以自由添加和删除过滤字段,该选项默认是勾选的:

  • 删除字段:点击每个字段右上角的功能按钮选择删除即可删除字段
  • 添加按钮:可设置添加按钮的显示标题,如添加条件,点击添加按钮可添加字段,添加的多个字段之间过滤条件为“并且”的关系。若勾选了允许“或”条件,添加字段时,可选择添加为“或”关系的条件
  • 清空按钮:可设置清空按钮的显示标题,如清空,点击清空按钮可清空字段过滤中的全部过滤条件,即查询全部数据

# 使用表达式模式过滤数据

字段过滤组件提供两种模式过滤数据:

  • 字段选择模式:即通过可视化的下拉框,或者输入框等形式选择字段内容过滤数据,在字段选择模式只支持“并且”和“或”关系的单层括号进行嵌套
  • 表达式模式:当允许动态添加条件后,可以转成表达式模式进行过滤,勾选允许转成表达式模式,点击表达式按钮可输入表达式进行过滤。
    • 切换到表达式模式下,会自动将字段选择模式下的条件转成表达式,也可以继续输入复杂的表达式,例如多个“并且”和“或”关系的嵌套,([企业名称] *= '武汉' OR [登记机关] in ('420000') OR [企业类型] in ('1000')) AND ([经营状态] in ('01') AND [注册资本(万元)] = '[1000~5000]' AND ([成立日期] <= '20200101' OR [核准日期] >= '20100101'))
    • 点击返回按钮,可切换成字段选择模式,并且可以设置默认为表达式模式显示表达式工具栏

表达式过滤

当设置了允许转成表达式模式,提供了更多属性:

  • 默认表达式模式:字段过滤默认为表达式模式,勾选后,点击返回按钮,可切换成字段选择模式
  • 显示表达式工具栏:勾选后当显示为表达式模式时,会显示表达式工具栏,可选择字段列表及添加操作符

# 运算条件设置

多个字段过滤的运算关系可以设置为“并且”或“或”关系,可以嵌套,提供了如下属性设置:

  • 允许“或”条件:勾选后,当动态添加字段时,可在添加字段对话框中勾选添加为“或”关系的条件,默认勾选。“或”关系的条件会用括号括起来
  • 总是显示“并且”和“或”:勾选后,会在每个字段输入框前面显示当前字段与其他字段间的条件关系,点击“并且”和“或”可以切换运算关系

# 操作符设置

在显示界面可允许切换操作符,在属性栏>字段过滤>高级下勾选允许切换操作符即可,点击字段选择框右上方的功能按钮或者当显示操作符时点击切换即可。
可以设置总是显示操作符,在属性栏>字段过滤>高级下勾选总是显示操作符。当没有勾选该选项时,每个字段类型都会有一个默认的操作符,即操作符下拉框列表中的第一个选项,默认操作符会自动隐藏,切换为其它操作符时才会显示操作符。

操作符

TIP

在字段设置对话框中当字段默认显示时,可设置默认显示的操作符。

# 输入项宽度设置

可设置字段过滤组件中字段输入项的宽度,在属性栏>字段过滤>输入项宽度中即可设置输入框的宽度及标题宽度:

宽度设置

  • 宽度:即每个字段输入框的宽度,单位为px,输入大于0的整数即可。当未输入固定宽度时,系统会有一个默认宽度,在不同分辨率及大小屏幕上会自适应,可设置最大宽度
  • 最大宽度:当未输入固定宽度时,输入框宽度会自适应,但不能超过设定的最大宽度,单位为px,输入大于0的整数即可
  • 标题宽度:可设置为自适应像素百分比,同时可设置最小/最大标题宽度

# 输入组件样式设置

属性栏>样式下可设置字段过滤组件的布局及输入组件的样式:

样式设置

  • 内部布局:字段过滤组件内部布局默认为横向排列,可调整为纵向排列
  • 对齐方式:包含左对齐居中对齐右对齐
  • 下拉框:当输入方式为下拉框时,设置下拉框的样式,下拉选择对应的风格即可,这里共用的是下拉框组件的风格,如果需要增加,需要在下拉框的样式中进行管理
  • 输入框:当输入方式文本输入数值输入时,设置文本输入或数值输入框的样式,下拉选择对应的风格即可,这里共用的是文本输入组件的风格,如果需要增加,需要在文本输入的样式中进行管理
  • 日期框:当输入方式日期时,设置日期输入框的样式,下拉选择对应的风格即可,这里共用的是日期组件的风格,如果需要增加,需要在日期的样式中进行管理
  • 添加按钮:当允许动态添加条件时,可设置添加按钮的样式,这里共用的是按钮组件的风格,如果需要增加,需要在按钮的样式中进行管理
是否有帮助?
0条评论
评论