Skip to main content

列表视图

1 说明

最基础的列表展示,可承载文字、列表、图片、段落,常用于后台数据展示页面。

2 配置

2.1 新增列表视图

在页面右边栏的元件栏中的数据容器模块下选中列表视图,拖拽到页面画布

2.2 配置列表视图

选中画布中的列表视图,在右边栏的属性栏中设置列表视图

2.2.1 数据源

1、数据源选择项中选择数据库,实体选择要展示的数据实体

2、筛选条件处设置筛选条件,来限制列表视图中的数据【只有满足该条件的数据才会被展示】

2-1:点击筛选条件框,弹出新增规则弹框

2-2:在新增弹框中选择实体属性【年龄】,判断条件【>=】,预期结果【30】

2.2.2 基础设置

1、基础设置处设置列表的大小,来控制页面上容器的高度

1-1:在容器高度输入框中输入高度:200px

2、支持选中:开启支持选中后,点击某条数据,则呈现选中态,并支持设置选中态样式。

3、列表样式:支持边框、斑马纹、分隔线。

2.2.3 搜索

4、搜索处开启检索功能

4-1:开启检索按钮

4-2:设置可检索的字段

4-2-1:点击添加查询字段,弹出"新增查询字段信息"弹框

4-2-2:

在弹框中选择点击实体属性选择框,弹出属性选择弹框【当前实体的属性和关联关系】

4-2-3:在"选择实体属性"弹框中选择属性【工号】,点击选择

4-2-4:弹框消失,"新增查询字段信息"弹框中出现选择的【属性】,标题默认为属性名,修改标题【员工号】

修改前

修改后

4-2-5:修改标题宽度和占位宽度【标题宽度即指文本框距离页面的左边距】,占位宽度【展位宽度即指文本框的长度】

4-2-6:选择渲染类型和开启该渲染按钮

4-2-7:选择比较类型:模糊匹配

4-2-8:设置完成,点击保存,弹框消失,搜索字段设置处有设置的搜索字段,页面出现搜索条件框

4-2-7:快捷搜索,输入关键词后回车即可检索

2.2.4 懒加载

5:设置列表视图加载方式

5-1:设置懒加载

5-1-1:打开启用懒加载按钮,默认行数选择【10 行/页】

5-1-2:拖一个表单文本到列表视图的数据内容区域

5-1-3:选中该表单文本,在属性栏设置标题文案【工号】,内容处点击新增设置表单内容

设置标题

选择属性

设置完成

5-1-4:在设置一个姓名字段

5-1-6:拖一个图片元件到列表视图的数据内容区域,选择要展示的图标和设置图标大小

5-1-7:页面绑定到导航栏,预览时,数据底部有 loadingmore,且点击加载下一批数据

5-2:设置定时轮询和滚动

5-2-1:关闭懒加载按钮,开启定时轮询开关和滚动开关按钮,并设置定时轮询时间 5s

5-2-2:页面绑定到导航栏,预览时,数据列表视图滚动展示,且每 5s 数据刷新一次

2.2.5 可见性设置

可参考通用配置

2.2.6 设计

可参考通用配置