1 - 单一记录

单一记录属于数据控件之一,具有数据收集、校验和提交等功能,是展示实体单条数据的起点,通常包含各种有输入值或选中值的组件,例如单行文本、日期选择、下拉框等。常用于调查问卷填写、基础资料填报、单据信息填写等场景。

1.控件简介

单一记录属于数据控件之一,具有数据收集、校验和提交等功能,是展示实体单条数据的起点,通常包含各种有输入值或选中值的组件,例如单行文本、日期选择、下拉框等。常用于调查问卷填写、基础资料填报、单据信息填写等场景。

1719397589531

在一些较复杂的业务场景中,经常会遇到需要管理单项主记录及其相关的子记录的情况。为了有效实现这种主从数据的录入和管理,在用户界面设计中,单一记录通常与重复表或重复节控件结合使用。这种设计允许用户在一个统一的视图中添加、修改或删除子记录,同时保持与主记录的关联。

1719397568484

2.属性

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

  • 实体

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

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

1719454363794

  • 隐藏字段

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

1719455703357

1719455754610

  • 条件

1719456391246

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

单一记录中条件属性较为特殊,单一记录是用于精准展示实体中指定数据项的数据控件。在查看或编辑详情时,需明确该数据项的具体指向,平台中系统默认采用数据ID来唯一标识并定位每条数据,该设置是自动的,无需用户手动配置。但若需根据其他唯一字段来定位数据,设计师可自定义设置。然而,自定义设置时必须确保所选条件能够精确匹配到单一数据记录。如果所设置的条件对应了多条数据,系统将无法展示并会报错默认不加载。

1719456460210

  • 分辨率设置

分辨率设置是确保用户界面元素在不同屏幕尺寸和分辨率下保持可用性和视觉一致性的过程。单一记录的分辨率设置支持自适应和固定宽度两种模式。

自适应:可以设置单一记录与视口或父容器的宽度占比,以及阈值宽度。

1719457192327

固定宽度:宽度可设置为特定的像素值,使得单一记录在不同设备屏幕上展现出统一的尺寸,不随视口或父容器大小调整而变化。

1719457421737

  • 边距设置

边距设置是用于控制元素之间空间布局的属性,分为内部元素间隔、内边距、外边距三类配置。

内部元素间隔:是指组件内部元素之间的距离。分为行间隔和列间隔,单位为px。

1719458030578

内边距:是指组件内部元素与边框之间的距离。设置组件的内边距会在组件内边框周围创建一个空白区域,使内容与边框之间有一定的距离。单位为px,可设置上下左右四个方向。

外边距:是指组件与其他组件之间的距离。设置组件的外边距会在组件周围创建一个空白区域,使组件与其周围的组件产生一定的间距。单位为px,可设置上下左右四个方向。

1719457909414

3.事件

  • 数据加载后:当数据控件数据加载完成后触发。

    1719458316869

4.风格

1723084498337

  • 高度

自适应:指高度根据内容自适应。

固定值:指设定固定高度,当内容超过固定高度时,控件内将出现纵向滚动条。当父级容器小于控件高度时,父级容器出现纵向滚动条。

  • 伸缩

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

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

5.场景示例

5.1场景描述

已有实体“供应商”,希望在表单验证通过后创建对应数据项。

5.2操作步骤

1、创建详情页面,页面名称“供应商详情页”,页面类型选择“详情页”,页面对应实体选择“供应商”,单击确定,创建页面。

1719459138207

2、控件库中选择“单一记录”,往画布区拖入控件,控件属性区中单击“实体”属性。

1719468580977

3、实体属性弹窗中,选择“供应商”实体,右侧选择需要展示的字段,设置控件生成逻辑,单击确定,完成配置。

1719468827787

4、查看自动生成内容,布局是否符合需求,不符合可自行调整。

1719470190213

5、设置字段页面校验:①必填:由于必填已在实体处设置,页面将自动设置;②手机号校验:选择“联系方式”字段,属性校验分组输入类型“手机号码”。

1719470164824

6、控件库中选择“工具栏”,往画布区拖入控件,控件属性区中设置对齐方式为居中。

1719470297479

7、设置“立即创建”按钮:操作1名称修改为“立即创建”,点击“编辑”图标,设置“保存记录”行为,实体选择“供应商[单一记录]”。

1719469411128

8、保存页面,完成详情页创建。

1719469509709

9、创建对应列表页,并创建与详情页关联关系,完成后测试发布应用。

1719470337085

5.3效果演示

1719476576967

2 - 重复表查询

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

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

3 - 重复表录入

为简化数据输入流程而设计的组件,这种控件主要适用于数据字段较少且格式统一的录入场景,避免了为每个数据条目单独构建录入页面的需要,显著提升了数据录入的效率。

控件简介

重复表录入控件是为简化数据输入流程而设计的组件,这种控件主要适用于数据字段较少且格式统一的录入场景,避免了为每个数据条目单独构建录入页面的需要,显著提升了数据录入的效率。

作为重复表控件的一种,重复表录入控件也集成了一系列高级功能,包括但不限于数据选择、排序、筛选、分页以及自定义操作等。

1719828125363

属性

表格属性

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

  • 实体

展示数据的来源。实体属性具备与多种数据源建立关联的能力。重复表录入控件最常用的是实体数据源和关系数据源。

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

实体数据源允许绑定当前应用自定义的实体,或跨应用的实体。基于实体数据源,数据控件便能够在应用程序内执行全方位的数据操作,包括但不限于数据的检索、新增、修改以及删除等。

1719830008990

而关系数据源主要用于处理具有主子聚合关系的数据,如物资领用单和领用明细,领用明细依赖于领用单,无法独立进行数据的新增、更新和删除操作,这种情况下,关系数据源可以清晰的表明领用明细和领用单之间的依赖的关系。关系数据源通常需要与单一记录嵌套使用。

1719829784400

  • 隐藏字段

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

1719478981585
1719455754610

  • 条件

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

1719456391246

  • 排序

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

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

1719479426360

控制显示条数

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

1719479839810

  • 实体变更订阅

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

1719479955807

  • 默认不加载

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

1719480160722

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

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

1719887928803

  • 多级表头

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

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

1719480790917

1719480973182

  • 列字段

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

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

1719887799862

  • 操作列

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

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

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

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

1719482109444

  • 顶部操作

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

重复表录入控件作为全表编辑型控件,会频繁执行插入、删除等操作,为了提升操作便利性,平台预置了三种录入的常规操作:

◇ 插入操作:插入一个空白行

◇ 复制操作:复制当前行或勾选行

◇ 删除操作:删除当前行或勾选行

1719888025007

  • 行浮层操作

重复表录入控件的行操作类型之一,位于重复表录入控件侧边的快捷操作,鼠标hover行时展示,仅支持三种预置操作:新增行、复制行、删除行。预置操作的功能与顶部预置操作一致。

1719890620026

行浮层操作支持三种显示样式:

1719890861158

◇ 联动显示:默认,与顶部操作中同类型预置操作状态同步,如顶部操作中的[删除]操作隐藏,则浮层操作中[删除行]操作联动隐藏

◇ 独立显示:行浮层操作显示状态独立控制

◇ 不显示:不显示行浮层操作

  • 行序号

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

1719890971700

  • 过滤能力

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

1719543496781

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

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

1719544012516

表格搜索模式:

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

1719554173807

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

1719554226935

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

1719554265152

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

1719554318639

  • 分页设置

是否展示分页组件

1719556775678

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

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

1719556891903

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

1719557009505

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

1723778501014

1723778520993

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

1719557244781

  • 列宽可调整

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

1719557874677

  • 固定列

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

1719559112776

  • 最小条数

保存时系统会自动检查输入的数据条目,若数据条数未达到预设定的最小条数要求,将无法保存。

  • 默认条数

初始化时若尚无任何数据项时,控件会自动添加一定数量的空白数据项,以便可以便捷的输入信息。

  • 总有一行选中

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

列属性

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

1720059901762

具体字段的设置,需点击列内子控件进行设置,配置详情请参见:空链接

1720060089556

  • 隐藏列

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

1719559457885

  • 列对齐

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

1719560625111

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

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

1719561011509
1719561188185

  • 描述信息

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

1719562183972

事件

表格事件

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

列事件

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

风格

表格风格

1723084337280

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

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

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

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

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

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

  • 行选中效果:选中行时,支持高亮效果。

1723792548971

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

4 - 树控件

适用于大量、具有层级关系的数据展示场景中,并且利用组件的展开收起和关联选中等交互可以方便地对数据进行操作处理。常用于左树右表或左树右详情的业务场景。

适用于大量、具有层级关系的数据展示场景中,并且利用组件的展开收起和关联选中等交互可以方便地对数据进行操作处理。常用于左树右表或左树右详情的业务场景。

descript

  • 使用过程
  1. 拖入【树】控件至画布区
  2. 在控件属性栏中选择数据来源,树控件作为展示性数据控件,支持多种数据来源(实体、选项集、枚举),选择具体数据来源
  3. 根据业务需求,配置控件属性、事件、风格
  • 控件特性
  1. 树控件属性
参数名 说明
标题 树控件标题设置,支持条件
数据来源 树控件支持多种数据来源
l 实体:最常用的数据来源,支持树实体和非树实体,若选择非树实体,则层级为1
descript

l 选项集:以选项集为数据来源,层级为1
descript

l 枚举:以枚举为数据来源,层级根据枚举类型不同而不同,级联枚举和多级枚举为多层级展示,平级枚举层级为1
descript
条件 实体数据来源特有属性,数据满足过滤条件才显示。注:不满足条件的节点数据不展示当前节点及所有下属节点
排序 实体数据来源特有属性,数据初始加载时的显示顺序。
根节点名称 根节点的名称设置。根节点默认不绑定数据。
节点名称 节点的名称设置,支持选择数据字段或输入固定字符作为显示名称。
节点连接线 可选是否开启连接线,开启后节点之间增加连接线,常用于文件目录结构展示。
descript
搜索 树的搜索定位能力,输入关键字,可快速搜索定位数据。

descript
顶部操作 树控件的顶部操作,位于树的顶部,通常用于新建、刷新以及批量操作的设置。默认支持平铺展示两个操作,超出的操作将收起至更多。
descript
节点复选 可选是否开启复选框。
总有一行选中 勾选后始终存在选中行,默认为根节点。
节点操作 树控件的节点操作,位于节点的右侧,通常用于删除、编辑等节点操作的设置。默认支持平铺展示一个操作,超出的操作将收起至更多。
descript

5 - 树表查询

在显示大量结构化数据时,我们可以使用【重复表控件】,但在处理树形的数据时,重复表无法很好地表现出数据的层级结构,那么针对这种大量、具有层级关系的数据展示和录入场景,我们提供一个新的控件【树表】,来完美展示数据的信息和层级结构。

在显示大量结构化数据时,我们可以使用【重复表控件】,但在处理树形的数据时,重复表无法很好地表现出数据的层级结构,那么针对这种大量、具有层级关系的数据展示和录入场景,我们提供一个新的控件【树表】,来完美展示数据的信息和层级结构。

树表也属于数据表格控件,基础能力与重复表类似,但仅支持PC端,使用时也需要先通过数据绑定来绑定实体模型,再设置控件属性、事件和风格。同时支持对数据列表进行选择、筛选、分页、自定义操作等复杂功能。

descript

  • 使用过程
  1. 拖入【树表查询】控件至画布区
  2. 在控件属性栏中绑定数据源,选择需要展示的实体字段,树表只支持绑定【树形档案】类型实体
  3. 根据业务需求,配置控件属性、事件、风格

descript

  • 控件特性
  1. 树表查询控件属性
参数名 说明
标题显示 树表标题设置,是否显示标题。
实体 树表控件仅支持绑定树实体。
条件 条件编辑器,数据满足过滤条件才显示。注:配置条件后,将不展示不满足条件的节点数据及所有下属节点数据
排序 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段值相同时,再按照下一个规则进行排序。
实体变更订阅 一般用于弹窗页面数据变更后自动更新该控件。需订阅实体,默认订阅当前实体。
默认不加载 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。
注:
1. 重复表默认初始化时自动加载实体数据,无需事件触发。
2. 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。
选择模式 列表项勾选模式,支持【无】【单选】【多选】,启用【单选】后,显示单选按钮,启用【多选】后,显示多选按钮,三种模式互斥。
多级表头 表头呈多级展示,可表述表头信息层级包含关系启用多级表头后,画布区可批量选择表头,右键添加上级分组;
取消勾选后,将清空多级表头的配置
descript

画布区配置:
l 批量选择单元格,右键可添加上级分组
l 单选分组单元格,右键可编辑分组内容、删除当前分组
l 最多支持4级表头
操作列 启用操作列后,将在树表列中配置单独的操作列。可以根据业务需求,通过操作的事件自定义配置执行动作。
descript

l 常用按钮数:默认为3,超过配置数的操作将收起至更多
l 显示位置:操作列位置支持列首、列尾两种,默认列尾
l 操作配置:支持配置操作的图标、名称、事件、状态和样式
descript
顶部操作 表格顶部操作,位于树表顶部,通常用于新建、刷新以及批量操作的设置。支持添加操作和操作组。
descript
启用过滤 树表过滤查询能力,在树表上方添加查询条件,以便快速查询数据。查询结果将以平铺形式(非树结构)进行展示。
descript
启用分页 可选择是否启用分页
descript

l 支持自定义设置每页显示条数l 支持设置默认分页条数
l 支持设置分页对齐方式(左、中、右)
descript
固定列 配置表格前后列的固定。当横向内容过多时可以配置固定前侧或者固定后侧。
descript
总有一行选中 勾选后始终存在选中行,默认为当前页第一行。
表格列 树表生成后,单击列,可以进行列的属性配置。支持配置列隐藏、排序、列宽、对齐方式、列图标、格式设置等。
列属性详见(2)树表查询控件列属性。
  1. 树表查询控件列属性

树表生成后,单击列,可以进行列的属性配置。

参数名 说明
标题 当前列标题设置。
隐藏列 可选择是否隐藏列。支持隐藏列的添加表达式,当满足条件时,隐藏当前列。
列对齐 当前列的对齐方式:居左、居中、居右。
列宽 列的宽度,单位为%,支持输入或画布区手动拖拽改变列宽。
列样式 支持设置列背景色、字体颜色、字体效果(加粗、斜体、下划线)以及各种样式的条件表达式,满足不同条件,设置不同列格式。
图标显示 支持设置列图标。
l 图标:支持多图标显示,支持不同条件下显示不同图标
l 图标位置:文字前、文字后,支持配置各个图标的位置
l 图标状态:不同条件下控制图标显隐l 图标样式:不同条件下控制图标颜色
descript
格式设置 配置树表中不同类型字段的显示样式。
如日期可配置日期格式“年-月-日”或“年-月”等,数字可配置为百分比格式,并支持以进度条形式展示。详见各类型录入控件的格式设置。

6 - 树表录入

树表录入属于树表控件的一种,主要用于数据字段较少的树形结构数据录入场景,无需单独再搭建录入页面。

树表录入属于树表控件的一种,主要用于数据字段较少的树形结构数据录入场景,无需单独再搭建录入页面。

descript

  • 使用过程
  1. 拖入【树表录入】控件至画布区
  2. 在控件属性栏中绑定数据源,选择需要展示的实体字段,树表只支持绑定【树形档案】类型实体
  3. 根据业务需求,配置控件属性、事件、风格

descript

  • 控件特性
  1. 树表录入控件属性
参数名 说明
标题显示 树表标题设置,是否显示标题。
实体 树表控件仅支持绑定树实体。
条件 条件编辑器,数据满足过滤条件才显示。注:不满足条件的节点数据不展示当前节点及所有下属节点
排序 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段相同时,再按照下一个规则进行排序。
实体变更订阅 一般用于弹窗页面数据变更后自动更新该控件。需订阅实体,默认订阅当前实体。
默认不加载 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。注:1. 重复表默认初始化时自动加载实体数据,无需事件触发。2. 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。
选择模式 列表项勾选模式,支持【无】【单选】【多选】,启用【单选】后,显示单选按钮,启用【多选】后,显示多选按钮,三种模式互斥。
多级表头 表头呈多级展示,可表述表头信息层级包含关系启用多级表头后,画布区可批量选择表头,右键添加上级分组;
取消勾选后,将清空多级表头的配置
画布区配置:
descript

l 批量选择单元格,右键可添加上级分组
l 单选分组单元格,右键可编辑分组内容、删除当前分组
l 最多支持4级表头
操作列 启用操作列后,将在树表列中配置单独的操作列。可以根据业务需求,通过操作的事件自定义配置执行动作。
descript

l 常用按钮数:默认为3,超过配置数的操作将收起至更多
l 显示位置:操作列位置支持列首、列尾两种,默认列尾
l 操作配置:支持配置操作的图标、名称、事件、状态和样式
descript
顶部操作 表格顶部操作,位于树表顶部,通常用于新建、刷新以及批量操作的设置。支持添加操作和操作组。
树表录入控件预置有三种操作,且不支持删除和修改事件。
l 插入行:当前下方插入行
l 复制行:复制当前行或选中行
l 删除行:删除当前行或选中行
descript
启用过滤 树表过滤查询能力,在树表上方添加查询条件,以便快速查询数据。
查询结果将以平铺形式(非树结构)进行展示。
注:搜索过程中无法进行录入操作。
descript
启用行序号 可选择是否显示行序号
descript
启用分页 可选择是否启用分页
descript

l 支持自定义设置每页显示条数
l 支持设置默认分页条数
l 支持设置分页对齐方式(左、中、右)
descript
固定列 配置表格前后列的固定。当横向内容过多时可以配置固定前侧或者固定后侧。
表格列 树表生成后,单击列,可以进行列的属性配置。支持配置列隐藏、列宽、对齐方式等。列属性详见(2)树表录入控件列属性。
  1. 树表录入控件列属性及列事件

树表生成后,单击列,可以进行列的属性配置

注:列单元事件仅对只读状态生效

descript

参数名 说明
标题 当前列标题设置。
隐藏列 可选择是否隐藏列。支持隐藏列的添加表达式,当满足条件时,隐藏当前列。
列对齐 当前列的对齐方式:居左、居中、居右。
列宽 列的宽度,单位为%,支持输入或画布区手动拖拽改变列宽。

7 - 重复节

多记录数据控件之一,是一种卡片式的列表展示,可承载文字、列表、图片、段落等,常用于后台数据展示页面。

重复节属于多记录数据控件之一,是一种卡片式的列表展示,可承载文字、列表、图片、段落等,常用于后台数据展示页面。每个节代表一条数据记录,设计师可以在单一节中灵活组合节内容,并且根据实例化数据进行动态展示。

descript

  • 使用过程
  1. 拖入【重复节】控件至画布区
  2. 在控件属性栏中绑定数据源,可选需要展示的实体字段,数据源的详细说明见文档【2.4.12】
  3. 针对单一节,灵活拖拽控件至节中,进行组合布局
  4. 根据业务需求,配置重复节控件以及节内控件的属性、风格和事件
  • 控件特性
  1. PC端重复节控件属性
参数名 说明
标题 重复节标题设置。
条件 条件编辑器,数据满足过滤条件才显示。
排序 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段相同时,再按照下一个规则进行排序。
控制显示条数 按照排序规则,默认显示的top条数。配置后分页将无法启用。
实体变更订阅 一般用于弹窗页面数据变更后自动更新该控件,比如物料列表页弹窗或新页签的方式打开单条物料数据详情页,保存详情页数据后,列表页数据自动更新。配置方法:(1)首先物料列表数据控件需要在实体变更订阅中,订阅列表绑定的实体,即物料实体。(2)详情页面中保存按钮配置实体行为保存,需要配置行为执行后刷新页面数据,也配置物料实体。即实现保存详情数据后,自动刷新列表数据。
默认不加载 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。注:1. 重复表默认初始化时自动加载实体数据,无需事件触发。2. 该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。
样式 卡片式、列表式。l 卡片式:节以卡片形式排列,支持设置每行可固定卡片个数, 也可根据设置的卡片宽度自适应个数l 列表式:重复节以列表形式进行自由布局,支持每一列放置多个控件,可以使用容器控件进行灵活布局
卡片排列 卡片式可以设置单行卡片个数,固定个数或单行自适应显个数。
多级表头 表头呈多级展示,可表述表头信息层级包含关系
列表式专有属性,启用多级表头后,画布区可批量选择表头,右键添加上级分组;
取消勾选后,将清空多级表头的配置
descript

画布区配置:
- 批量选择单元格,右键可添加上级分组
- 单选分组单元格,右键可编辑分组内容、删除当前分组
最多支持4级表头
descript
列表式专有属性,可以设置列,每列内自动生成一个布局容器。
顶部操作 表格顶部操作,位于重复节顶部,通常用于新建、刷新以及批量操作的设置。支持添加操作和操作组。
总有一节选中 勾选后始终存在选中节,默认为当前页第一节。
显示顶部操作 在重复节的上方显示的操作
显示节标题 可选是否显示节标题。
显示节操作 单个节的顶部操作,位于节顶部。可选是否显示节操作。
节操作位置 支持设置节操作位置(左、右),与节标题位置互斥,当节操作位置设置为左时,节标题位置默认为右,当节操作位置设置为右时,节标题位置默认为左。
- 节操作位置:左
descript

- 节操作位置:右
descript
节操作 支持添加操作和操作组,同时重复节控件的节预置有三种操作,无法删除和修改事件。
l 添加节:最后一节后添加节
l 复制节:复制当前节
l 删除行:删除当前节
descript
启用分页 可选择是否启用分页
descript

l 支持自定义设置每页显示条数
l 支持设置默认分页条数
l 支持设置分页对齐方式(左、中、右)
descript
滚动翻页 仅卡片样式支持配置滚动翻页,仅重复节只读态时生效, 非只读态时按正常分页栏的方式分页。
开启分页后可配置每页几行,因为卡片样式是配置了单行个数, 所以可以算出每页有多少条数据。
滚动翻页的效果如下图:以左右滑动形式翻页
descript
显示排序 运行态是否开启排序功能。例如打开排序开关,排序字段效果为
descript
最小条数 保存时会校验录入的数据条数不能小于最小条数。
默认条数 页面初始化时,当未录入数据时, 默认添加的空数据条数。
  1. 移动端重复节控件属性
参数名 说明
标题显示 重复节标题设置,是否显示标题。
条件 条件编辑器,数据满足过滤条件才显示。
排序 数据初始加载时的显示顺序,支持按照实体字段进行升序或降序排列。当配置多个排序规则时,将首先按照第一个排序规则进行排序,当第一个字段相同时,再按照下一个规则进行排序。
控制显示条数 按照排序规则,默认显示的top条数。配置后分页将无法启用。
实体变更订阅 一般用于弹窗页面数据变更后自动更新该控件。需订阅实体,默认订阅当前实体。
默认不加载 默认不加载是指重复表初始化时,不加载实体数据,同时可通过页面规则等方式获取数据。注:1. 重复表默认初始化时自动加载实体数据,无需事件触发。该设置勾选后,数据来源、过滤条件、排序、分页将由页面规则决定,重复表自带能力将屏蔽。请谨慎使用。
显示样式 重复节在运行态的显示样式l 卡片:以卡片形式区分节l 分割线:以分割线形式区分节可配置单行列数,一列或两列
非批量操作 在重复节可以添加非批量操作,作可以配置放到重复节头部或底部
descript


descript
批量操作 批量操作中可配置是否开启默认勾选模式。
默认勾选模式:开启后,无需点击批量操作触发,直接是可以勾选数据的状态。
批量操作可配置单选或多选
descript

descript
启用节标题 可选是否显示节标题。
节操作 预置插入、复制、删除节操作, 节操作可配置不同的交互效果:固定显示、动作面板、侧滑
descript
显示排序 当重复节绑定的主表时,可配置在运行态是否有排序功能,可配置排序字段。
descript
总有一节选中 勾选后始终存在选中节,默认为当前页第一节。
启用分页 可选择是否启用分页,启用分页后,运行态以[加载更多]的形式触发页数切换,点击[加载更多],将记载下一页数据
descript

l 支持设置默认分页条
descript
最小条数 保存时会校验录入的数据条数不能小于最小条数。
默认条数 当页面初始化时,控件未录入数据时, 默认添加的空数据条数。