Skip to main content

可编辑表格

1 说明

表格展示组件,类似于数据表格但是多了可编辑行的功能,可承载文字、列表、图片、段落,常用于后台数据展示页面。用户可直接在当前数据上直接修改内容,不需要再配置表单页处理新增和修改操作。

支持批量、单行编辑、新增行功能,对应的运行态也会展示批量、单行编辑按钮、新增行按钮,操作点击后会有对应保存、取消按钮状态变动。

如果超过一条记录处于编辑状态,则可操作全局的批量保存、取消编辑,当然也可单行操作保存、取消。

2 配置

2.1 数据源

数据源配置参见通用文档数据源配置

2.2 数据处理方式

  1. 编辑方式:表格渲染的状态
  2. 单行编辑:表格渲染为非编辑态,需要全局按钮、行内按钮或双击单元格触发进入编辑状态
  3. 全量编辑:表格渲染为编辑态,无需双击或点击按钮即可直接编辑

  1. 处理方式:在可编辑表格操作数据后,用哪种方式对数据进行真正的增删改操作
  2. 数据库:平台提供的按钮点击事件里的增删改方法处理数据,适用于以实体作为数据源的场景,无需用户配置处理逻辑,只需配置内置按钮。
  3. 逻辑:需要配置逻辑,在可编辑表格执行保存,删除操作时,调用这条逻辑,此处自定义入参使用约定式配置,逻辑必须配置至少一个入参,当只有一个入参时,无论逻辑配置的参数的 name 是什么,传递给后端的时候都会以 param 这个名称承载表格行内的值。当有两个入参时,会优先去找名称为 param 的入参赋予表格行内的值的参数。
  4. 连接器:
1. 针对全量编辑的表格,需要分别配置批量保存使用的连接器,批量删除使用的连接器,按钮触发操作时,会调用对应的连接器,通过连接器中对应的接口处理数据。

1. 单行编辑的表格,需要分别配置单行保存、单行删除、批量保存、批量删除四种情况下的使用的连接器,按钮触发操作时,会调用对应的连接器,通过连接器中对应的接口处理数据。
  1. 本地处理:无需配置任何处理方式,可编辑表格的上更新的数据在本地缓存,由页面中的其他组件触发增删改处理操作。

2.3 列

  1. 列宽度:设置列宽度的单位,默认为像素
  2. 列字段:主要是配置当前表格需要展示哪些字段,字段的选择和展示形式可以在添加列或者编辑列的时候配置,并可以编辑每列的标题、宽度、展示方式等配置。

字段配置只能选择当前数据源对应的实体属性字段或者关联实体对应的属性字段。

  1. 字段详细配置:添加或编辑列信息的时候,可以配置每列的标题、宽度、展示方式、展示态渲染类型等列属性,如下图所示

  1. 新增列或者编辑列的时候,会根据当前的实体属性类型来决定渲染类型的选择范围,可见下面字段类型支持的渲染方式,不同的渲染方式有对应的配置项信息,辅助完成一些自定义配置。
字段类型展示态渲染类型编辑态渲染类型
日期类型年月日

时分
年月日时分秒
年月日时分

时分秒
与展示态对应的日期时间选择器
下拉框
枚举类型默认(系统自动处理)
标签
下拉框
多选下拉框
字符串默认(系统自动处理)
超链接
文件
图片
进度条
文本
默认(系统自动处理)
输入框
文件上传
图片上传
下拉框
布尔类型布尔类型开关
下拉框
数字类型默认(系统自动处理)
超链接
进度条
数字文本
默认(系统自动处理)
数字输入框
下拉框
  1. 数字文本模式下的文本转换功能:当字段为数值类型时,展示态渲染类型可以配置为【数字文本】,针对这一类型支持配置文本转换模式
1. 简易模式:配置前后缀,以及前后缀的间距

1. 计算模式:提供表达式编辑器,配置数字文本的计算规则,展示计算后的值
  1. 列样式规则:如果当前表格的样式有一些特殊调整,

列样式规则支持配置默认样式,也支持规则样式。默认样式指所有内容都会显示的样式,规则样式指只有满足相应规则/条件的内容才会显示的样式。可以通过配置条件来定义规则,以及满足规则时对应的文本尺寸、颜色,背景填充,描边等样式。

2.4 行

  1. 显示行序号:用于控制是否显示每行的序号,开启后系统自动生成序号列,将每行数据的序号显示在左侧第一个单元格

  1. 支持分页、行数:用于控制表格是否可以多页显示,开启[支持分页]后,可设置行数,即一页展示多少行数据;
  2. 快速跳转:开关开启,当前表格数据超过一页的时候,可以开启跳转指定页的功能,用户可以快速跳转到某一个数据查看(前提:需打开支持分页开关)。

  1. 是否默认选中:开启后运行态表格渲染时会默认选中表格首行。

2.5 操作

  1. 下载表格:会显示下载表格按钮,配置项需要配置导出的文件标题。若文件标题类型选择默认,则系统会自动分配一个文件标题;若选择文本,则需要配置文本内容;若选择时间,则需要配置时间格式;若选择文本和时间,则需要配置文本内容和时间格式。

  1. 支持多选:配置了开启此开关,则会在表格前面展示多选框

  1. 禁用性配置参见可见性配置

2.6 按钮

2.6.1 按钮插槽配置

  1. 显示全局按钮配置:全局按钮插槽位可见性配置,开启后可显示表格全局的插槽,插槽内可放置按钮
  2. 显示行内按钮配置:行内按钮插槽位可见性配置,开启后可显示行内插槽,插槽内可放置按钮

  1. 行内按钮宽度设置:行内按钮插槽的宽度,单位是像素(px)
  2. 显示按钮个数设置:一行可放置的按钮数量
  3. 展示方式:多个按钮的排列方式,支持左对齐、居中、右对齐

2.6.2 预置按钮配置

  1. 单行编辑模式下的可编辑表格,提供预置的新增按钮、编辑按钮、删除按钮、批量编辑按钮

  1. 点击编辑按钮后,该行数据转为编辑态,可直接编辑后保存。

点击批量编辑后,所有行转为编辑态,可多行内容后批量保存

  1. 新增按钮:在表格底部新增行编辑态的空白行,可填写内容后保存。

  1. 删除按钮:点击删除按钮,可删除本行数据。
  2. 全量编辑模式下的可编辑表格,提供预置的新增按钮、删除按钮、批量保存按钮,对应下图所示的按钮

  1. 所有内置按钮都支持配置可见性、禁用性,参考可见性配置

2.7 通用

通用部分主要是配置运行时数据表的预置功能项是否显示、以及数据表格容器和内容的高度设置。

2.8 表格风格

支持选择表格风格为斑马纹或边框

2.9 其他配置

检索功能请参考检索配置

可见性请参考可见性配置

样式相关请参考样式配置

点击事件功能配置请参考事件

高级功能请参考高级函数

3 效果展示