重复表查询

以二维表格形式呈现数据,通常包含行和列,适用于呈现和操作大量的结构化信息。

1.控件简介

重复表查询控件属于数据控件之一,以二维表格形式呈现数据,通常包含行和列,适用于呈现和操作大量的结构化信息。使用该控件时需先绑定实体模型,随后便可根据需要配置其属性、响应事件,并定制其样式风格。此外,该控件提供了一系列高级功能,包括数据选择、排序、筛选、分页以及自定义操作等,以增强用户交互体验。

1719477965171

表格常用场景

  1. 当用户需要存储、组织和分析结构化数据时,重复表查询可以清晰地展示出数据的所有相关字段。
  2. 重复表查询具备行和列结构,当用户需要查找或整理数据时,可以轻松地进行数据过滤和排序,整合符合要求的数据并展示在表格中。

表格布局

1719481805872

2.属性

2.1表格属性

组件通用属性说明,请参见组件通用属性说明

  • 实体

展示数据的来源。实体属性具备与多种数据源建立关联的能力,其中最为普遍的是实体数据源。这种数据源可以绑定当前应用自定义的实体,或跨应用的实体。基于实体数据源,数据控件便能够在应用程序内执行全方位的数据操作,包括但不限于数据的检索、新增、修改以及删除等。

实体属性可以关联多种数据源,数据源详情信息,请参考:空链接

1719478949544

  • 隐藏字段

基于性能优化角度,数据控件在进行数据加载时,仅会检索页面中关联了录入控件或表格列的字段。然而,在实际业务中,有些字段数据可能用于页面逻辑处理,但又不希望在用户界面中展示。针对这种场景,平台引入了“隐藏字段”属性,该属性中勾选的字段,无需关联前端控件,但数据加载时仍会获取对应字段值。

1719478981585
1719455754610

  • 条件

定义一组过滤规则的条件编辑器,以便在数据展示时仅显示满足特定条件的数据项。

1719456391246

  • 排序

数据初始加载时的显示顺序,支持选择数据源中的某一字段为排序依据,配置默认排序规则,支持升序和降序。

支持多字段排序,首先按照第一个字段进行排序,当第一个字段相同时,再按照下一个规则进行排序。

1719479426360

控制显示条数

根据预设的排序规则,系统将默认展示排序后的前Top条数据。请注意,一旦配置了此选项,分页功能将不可用,所有符合条件的数据将一次性加载并展示。

1719479839810

  • 实体变更订阅

一般用于弹窗页面数据变更后,控件自动刷新。弹窗“确认”操作需订阅父页面中操作的实体。

1719479955807

  • 默认不加载

该属性勾选后,表格初始化时,不加载实体数据,需通过事件触发查询和刷新数据。

1719480160722

  1. 重复表默认初始化时自动加载实体数据,无需事件触发。
  2. 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。
  • 表头显示

是否显示表格头。默认显示。

  • 选择模式

表格项勾选模式,支持三种不同的选项:【无】、【单选】和【多选】。当启用【单选】模式时,列表将展示单选按钮,允许用户一次选择一个列表项。而启用【多选】模式后,列表将展示多选按钮,允许用户同时选择多个列表项。选择【无】模式时,则将不显示任何勾选按钮,用户无法通过勾选来选择列表项。三种模式互斥。

1719480674971
1719480505720
1719480548763

  • 多级表头

表头呈多级展示,可表述表头信息层级包含关系。启用多级表头后,画布区可批量选择表头,右键添加上级分组;取消勾选后,将清空多级表头的配置。平台最多支持4级表头。

多级表头详细配置过程,请参见:空链接

1719480790917

1719480973182

  • 列字段

表格展示的字段。可添加实体模型中字段,或添加自定义列。

自定义列相关信息,请参见:空链接

1719481031344

  • 操作列

表格的一个特殊列,它包含对表格中每行数据可以执行的操作或命令,常见操作列操作:查看、编辑、删除等。

◇ 常用按钮数:默认为3,超过配置数的操作将收起至更多

◇ 显示位置:操作列位置支持列首、列尾两种,默认列尾

◇ 操作配置:支持配置操作的图标、名称、事件、状态和样式

1719482109444

  • 顶部操作

位于表格最上方的一组操作工具,通常用于提供对整个表格数据或选定行的批量操作,如新增、删除、导入/导出。

1719543144641

  • 行序号

启用后,逐一为每一行数据分配一个唯一的序号。

1719559691365

  • 过滤能力

表格的快速搜索能力,启用后,允许设计师配置搜索字段,搜索区在表格上方。

1719543496781

搜索字段配置:单击搜索类型框后方的“设置”图标,可选择表格所关联实体的字段作为搜索字段,此外还可自定义配置搜索字段的显示样式等。

搜索字段的配置方式,与筛选控件中搜索设置相同,详情配置指南请参见:筛选控件-搜索字段配置空链接

1719544012516

表格搜索模式:

◇ 条件下拉:允许用户针对指定的数据字段进行数据检索

1719554173807

◇ 条件平铺:多个搜索字段并排或垂直排列展示,用户可以在这些字段中输入不同的搜索条件

1719554226935

◇ 快捷搜索:提供单一搜索框,可在多个预设文本字段中进行搜索。仅文本支持快捷搜索,最多支持3个字段同时参与快捷搜索。

1719554265152

◇ 折叠按钮:提供折叠按钮,将所有搜索字段简洁地收纳于该按钮下,点击此按钮即可展开或隐藏搜索选项。

1719554318639

  • 分页设置

是否展示分页组件

1719556775678

  1. 前端分页:所有数据一次性从后端获取,并存储在前端。前端通过控制显示的页数和每页显示的条目数量将数据进行分页展示,不需要与后端进行交互。
  2. 后端分页:数据分页处理在后端完成,只有用户请求的特定页面数据会被发送到前端,每次切换分页,均需发送后端请求。
  3. 数据源为实体数据源时,表格分页为后端分页,数据源为关系数据源时,表格分页均为前端分页。

◇ 分页条数:分页组件处展示每页显示条数的选择列表,需设置数组,如[5,10,20,50,100]。在"分页"属性开启时有效

1719556891903

◇ 默认分页条数:每页的数据条数。默认20条。在"分页"属性开启时有效。

1719557009505

◇ 对齐方式:分页组件的对齐模式,支持左、中、右

1719557244781

  • 列宽可调整

运行态可根据个人需求拖拽调整表格中各列的宽度,该调整仅对当前会话有效,重新加载页面将恢复到默认的列宽设置。

1719557874677

  • 固定列

当表格横向滚动时,某些列被锁定并始终显示在屏幕的指定侧,而其他列则随滚动条移动。

1719559112776

  • 总有一行选中

勾选后始终存在选中行,默认为当前页第一行。

2.2列属性

单击列看属性的列字段,即可在右侧查看并修改列属性。

1729821724460

  • 列宽、最小列宽

支持配置每列的列宽和最小列宽,列宽>最小列宽时,实际列宽=列宽;列宽<最小列宽时,实际列宽=最小列宽。

  • 隐藏列

开启后,该数据列不可见。默认关闭。

1719559457885

  • 显示排序

开启后该列可按照值字段进行运行态动态排序,升序或倒序。默认关闭。

1719559877590

  • 列对齐

当前字段列的表头和内容对齐方式。

1719560625111

◇ 列对齐:列内容对齐模式,支持居左、居中、居右

◇ 表头对齐:表头对齐模式,支持跟随、居左、居中、居右。默认跟随,设置跟随后,表头跟随列对齐

1719561011509
1719561188185

  • 描述信息

允许设计师对字段列进行详细说明。

1719562183972

  • 图标设置

允许设计师在表格的指定列中使用图标来提供额外的视觉提示或信息。

1719564058825

◇ 图标:支持多图标显示,支持不同条件下显示不同图标

◇ 图标位置:文字前、文字后,支持配置各个图标的位置

◇ 图标状态:不同条件下控制图标显隐

◇ 图标样式:不同条件下控制图标颜色

1719564144620

  • 溢出交互

表格列中的数据显示不完整,超出了列宽限制时,用户与这些数据项的交互方式

◇ 展示…:列内容超出列宽度时,在数据项后面显示省略号(…),鼠标hover时浮层展示全部内容

1719564612870

◇ 换行:列内容超出列宽度时,将换行进行展示

1719564635433

  • 格式设置

配置重复表中不同类型字段的显示样式。如日期可配置日期格式“年-月-日”或“年-月”等,数字可配置为百分比格式,并支持以进度条形式展示。

详见各类型录入控件的格式设置:录入控件

3.事件

3.1表格事件

  • 点击行时:点击某一行时触发。
  • 双击行时:双击某一行时触发。
  • 勾选行时:表格产生勾选动作时触发。
  • 取消勾选行时:表格产生取消勾选动作时触发。
  • 勾选行改变时:勾选行产生改变时触发,包含新增勾选和取消勾选,
  • 全选时:表格产生全选动作时触发。
  • 取消全选时:表格产生取消全选动作时触发。
  • 数据加载后:当数据控件数据初始化加载完成后触发。
  • 分页改变时:分页发生改变时触发。

3.2列事件

  • 单击单元格:点击当前列中单元格数据时触发。
  • 双击单元格:双击当前列中单元格数据时触发。
  • 单击标题格:点击当前列中表头时触发。
  • 双击标题格:双击当前列中表头时触发。

4.风格

4.1表格风格

1723084018408

  • 内框线:表格内部各个单元格之间的分隔线,支持横线和纵线设置。
  • 表格高度:表格高度设置,数据项过多超出预定义的高度时,表格将产生纵向滚动条。支持px设置和行数设置。

自适应:表格高度根据内容自适应。

最大值:设定表格最大高度,当内容超过最大高度时,表格将出现纵向滚动条。

  • 伸缩:表格放到页面上时,可以伸缩占满剩余空间。

自动拉伸:当父级容器主轴有剩余空间时,子控件可以拉伸填满剩余空间,当子控件的内容超过剩余空间时,父级控件出现滚动条。

自动缩小:当父级容器主轴剩余空间不够时,子控件自动缩小,子控件可能出现滚动条。

  • 行背景色:表格内容区颜色设置,支持条件表达式。

4.2列风格

1719568308674

  • 背景色:列内容背景色设置,支持条件表达式。
  • 字体颜色:列内容字体颜色设置,支持条件表达式。
  • 字体效果:列内容字体效果设置,支持条件表达式。

4.3列对齐和表格对齐

可分别设置表头对齐和列对齐。

1723792661722
1723792678333

5.场景示例

5.1场景描述

搭建一个具有增删改查功能的供应商基础查询列表,需要包含以下几个功能:

1、数据展示:以表格形式展示供应商的基本信息

2、排序 :①默认按照名称排序;②用户可以根据不同的字段(如名称、评级等)进行实时排序

3、分页功能:支持分页显示

4、搜索功能 :允许用户通过供应商名称、联系人搜索供应商

5、固定名称列和操作列

6、新增功能:点击新增按钮,新开录入详情页面

7、编辑操作:点击操作列中编辑按钮,新开页面,修改当前项数据

8、删除操作:①单项删除:点击操作列中删除,二次确认后删除当前数据项;②批量删除:勾选删除项,点击“删除”按钮,批量删除所有勾选项

5.2操作步骤

5.2.1数据展示

1、控件库中选择“重复表查询”,往画布区拖入控件,控件属性区中单击“实体”属性,设置数据源。

1719816982463

2、实体属性弹窗中,选择“供应商”实体,右侧选择欲展示的字段,单击确定,完成配置。

1719817098521

3、查看表格字段效果。

1719817171713

5.2.2条件、排序

1、选中“重复表查询”控件,点击右侧控件属性区中“条件”属性,配置条件“启用状态 = 是”。

1719817407798

2、点击右侧控件属性区中“排序”属性,配置排序规则“供应商名称 升序”。

1719817449852

5.2.3分页功能

1、选中“重复表查询”控件,勾选右侧控件属性区常规分组中“启用分页”,设置分页条数和默认分页条数。

1723776494759
1719817594376

2、勾选右侧“启用跳转”,在分页后增加跳转输入框,可自定义输入跳转页码。

1723776697047
1723776717114

5.2.4搜索功能

1、选中“重复表查询”控件,勾选右侧控件属性区常规分组中“启用过滤”属性。

1719817689874

2、搜索字段会遵循实体字段处所配置的默认显示自动生成,点击“搜索类型”属性右侧“设置”图标,可调整搜索字段。

1719817828813

3、按需选择搜索类型,此处选用“条件下拉”即可。

1719817918680

5.2.5固定列

1、选择右侧控件属性区常规分组中“固定列”属性,配置固定列(前)=1,固定列(后)=1,即设置第一列和最后一列固定。

1719818171827

5.2.6新增功能

1、勾选右侧控件属性区顶部操作分组中“显示顶部操作”属性。

1719818620596

2、添加操作,名称为“新增”,点击“设置”图标,配置按钮样式。

1719818673055

3、点击“编辑”图标,配置按钮事件动作“打开页面”,页面选择“供应商详情页”,入参中页面打开模式选择“新增”即可,其余入参字段无需配置。

1719818443468

5.2.7编辑操作

1、勾选右侧控件属性区操作列分组中“启用操作列”属性。

1719818811736

2、添加操作,名称为“新增”,点击“设置”图标,配置按钮样式。

1719819162956

3、点击“编辑”图标,配置按钮事件动作“打开页面”,页面选择“供应商详情页”,入参中ID选择“列表当前行ID”,页面打开模式选择“编辑”,其余入参字段无需配置。

1719818949729

5.2.8删除操作

单项删除

1、操作列分组中添加操作,名称为“删除”,点击“设置”图标,配置按钮样式,启用“危险状态”属性。

1719819187543

2、点击“编辑”图标,配置按钮事件动作“实体-删除记录”,选择“供应商实体[重复表查询]”。

1719819116416

批量删除

1、顶部操作分组中添加操作,样式配置和事件配置同单项删除,顶部操作会自动匹配删除勾选项数据。

5.3效果演示

1719826263943

最后修改 October 25, 2024: 3.6操作文档更新 (77cc298)