EOS Low-Code Platform 8 EOS Low-Code Platform 8
产品简介
安装部署
应用开发
专题场景实战案例
低代码(Low-Code)开发参考手册
高开开发参考手册
流程开发参考手册
AFCenter 使用指南
Governor 使用指南
FAQ
  • 1 表格类型
  • 1.1 基础设置
  • 1.1.1 斑马线
  • 1.1.2 序号
  • 1.1.3 行高及对齐方式
  • 1.2 表格操作
  • 1.2.1 单选/多选
  • 1.2.2 表尾计算
  • 1.2.3 通过js控制单元格合并
  • 1.2.4 分页

布局与基础设置

在列表视图中,用户可以选择两种展示类型:表格模式和画廊模式。这两种展示类型都支持自定义样式和布局配置。

# 1 表格类型

当选择展示类型为表格时,用户可以根据自己的需求,对表格的基础样式进行选择。同时,对于那些需要特殊展示的字段,用户还可以进行单独的自定义样式设置。

# 1.1 基础设置

表格模式下用户可以为视图设置页面标题,选择是否使用斑马线、边框等视觉效果。此外,用户还可以决定列宽是否可拖动,以及是否启用序号等选项。

# 1.1.1 斑马线

使用带斑马纹的表格,可以更容易区分出不同行的数据。默认表格视图启用斑马线。

add1

# 1.1.2 序号

用户可以选择是否启用序号功能。启用后用户可以为其设置标题及宽度。
默认情况下,表格会启用序号功能,且序号标题默认为“#”,宽度为40px。

add1

# 1.1.3 行高及对齐方式

在表格模式的视图设置中,用户可以根据实际需求设置行高和对齐方式。其中,表格的行高默认为30px,用户可以通过计数器进行精确调整。对齐方式分为头部和内容两部分,默认设置头部和内容都为居左显示。

行高80,头部和内容居中的显示效果如下图所示

add1

# 1.2 表格操作

# 1.2.1 单选/多选

在单选表格、多选表格中,用户手动选中时可添加触发事件selectChangeEvent。

下面使用场景为:首次加载视图时默认全部选中,同时控制部分数据不允许被勾选。

  1. 可选配置:在视图设置-显示字段-表格设置中配置可选

  1. 通过js初始化选中:在视图设置-高级设置-事件中进行配置

示例:使用this.Api.setAllCheckboxRow()进行全部选中

  1. 通过操作设置选中:在视图设置-动作设置-工具栏-添加自定义按钮中配置

整体效果展示

  1. 根据条件设置记录是否能选中:在视图设置-表格设置-可选中配置可选逻辑控制

点击设置可选逻辑控制后,会提示已经生成方法

在对应方法中进行代码配置,当表格中不存在有效数据时列头复选框为禁用状态

# 1.2.2 表尾计算

用户可以通过在【表格设置-表尾】中设置来实现合计、平均值功能。

  1. 设置表尾计算:在视图设置-显示字段-表格设置中配置合计和平均值

  1. 整体效果展示

# 1.2.3 通过js控制单元格合并

合并行或列,可以通过this.Api.mergeCells()自定义合并方法

  1. 在视图设置-高级设置-事件中添加事件

  1. 使用this.Api.mergeCells()配置合并单元格

  1. 整体效果展示

# 1.2.4 分页

视图默认为分页模式,用户可以通过分页器设置分页选项。分页选项的默认值为[10,20,30,50,100],格式为数组。这些数字表示当前页的size,即每页显示的数据条数。如果用户选择不分页,分页器将会关闭。

默认情况下,首次加载视图时,每页查询条数为10。若需更改首次查询条数,请在【高级设置-事件】中选择视图加载前的事件,并在该事件中重新定义默认的首次查询条数。

注意:关闭分页器后会默认加载所有数据,数据量过大时可能会造成页面卡顿

← 创建 显示字段与表头 →