布局与基础设置
在列表视图中,用户可以选择两种展示类型:表格模式和画廊模式。这两种展示类型都支持自定义样式和布局配置。
# 1 表格类型
当选择展示类型为表格时,用户可以根据自己的需求,对表格的基础样式进行选择。同时,对于那些需要特殊展示的字段,用户还可以进行单独的自定义样式设置。
# 1.1 基础设置
表格模式下用户可以为视图设置页面标题,选择是否使用斑马线、边框等视觉效果。此外,用户还可以决定列宽是否可拖动,以及是否启用序号等选项。
# 1.1.1 斑马线
使用带斑马纹的表格,可以更容易区分出不同行的数据。默认表格视图启用斑马线。
# 1.1.2 序号
用户可以选择是否启用序号功能。启用后用户可以为其设置标题及宽度。
默认情况下,表格会启用序号功能,且序号标题默认为“#”,宽度为40px。
# 1.1.3 行高及对齐方式
在表格模式的视图设置中,用户可以根据实际需求设置行高和对齐方式。其中,表格的行高默认为30px,用户可以通过计数器进行精确调整。对齐方式分为头部和内容两部分,默认设置头部和内容都为居左显示。
行高80,头部和内容居中的显示效果如下图所示
# 1.2 表格操作
# 1.2.1 单选/多选
在单选表格、多选表格中,用户手动选中时可添加触发事件selectChangeEvent。
下面使用场景为:首次加载视图时默认全部选中,同时控制部分数据不允许被勾选。
- 可选配置:在视图设置-显示字段-表格设置中配置可选
- 通过js初始化选中:在视图设置-高级设置-事件中进行配置
示例:使用this.Api.setAllCheckboxRow()进行全部选中
- 通过操作设置选中:在视图设置-动作设置-工具栏-添加自定义按钮中配置
整体效果展示
- 根据条件设置记录是否能选中:在视图设置-表格设置-可选中配置可选逻辑控制
点击设置可选逻辑控制后,会提示已经生成方法
在对应方法中进行代码配置,当表格中不存在有效数据时列头复选框为禁用状态
# 1.2.2 表尾计算
用户可以通过在【表格设置-表尾】中设置来实现合计、平均值功能。
- 设置表尾计算:在视图设置-显示字段-表格设置中配置合计和平均值
- 整体效果展示
# 1.2.3 通过js控制单元格合并
合并行或列,可以通过this.Api.mergeCells()自定义合并方法
- 在视图设置-高级设置-事件中添加事件
- 使用this.Api.mergeCells()配置合并单元格
- 整体效果展示
# 1.2.4 分页
视图默认为分页模式,用户可以通过分页器设置分页选项。分页选项的默认值为[10,20,30,50,100],格式为数组。这些数字表示当前页的size,即每页显示的数据条数。如果用户选择不分页,分页器将会关闭。
默认情况下,首次加载视图时,每页查询条数为10。若需更改首次查询条数,请在【高级设置-事件】中选择视图加载前的事件,并在该事件中重新定义默认的首次查询条数。
注意:关闭分页器后会默认加载所有数据,数据量过大时可能会造成页面卡顿