表格
表格
适用场景
适用于读取、管理指定对象多条记录的场景,可以同时向用户清晰地展示多条数据的指定信息。比如管理求职者信息时,表格可以同时显示指定数量的求职者信息,并按得分等数据项进行排序操作。支持多个查询条件、自定义列渲染、操作列设置、排序等操作。
属性介绍
属性分类 | 属性名称 | 属性作用 |
---|---|---|
基本属性 | 组件ID | 组件在当前页面的唯一标识。 |
选择模式 | 组件的列表项前面可以选择增加单选或多选按钮。无:不显示前面的单选或多选按钮。单选:每一个列表项前面显示单选按钮。多选:每一个列表项前面显示多选按钮,表头显示全选按钮。 | |
数据属性 | 数据源 | 上下文:表示该表格的对象数据从页面上下文获取,该上下文的数据可由外部传入。流程:该表格的数据源由指定的流程返回,并且在表单渲染时触发流程执行。数据库:该表格的数据源由所选对象的数据库中读取。选择指定对象后,可以设置数据筛选条件,比如展示的数据的指定字段必须包含或不包含指定值。 |
选择对象 | 数据源为上下文或数据库时,需选择要展示的对象。 | |
选择流程 | 数据源为流程时,需选择流程以及选择流程值中要展示的对象。 | |
筛选条件 | ![]() 数据源为数据库时,可以添加指定筛选条件,只显示对应字段包含或不包含指定内容的数据项。 | |
设置列 | ![]() 拖动各项可以改变各列的前后顺序,单机新增列可以增加一个新的列,单机各项后方的设置按钮可以设置该列的高级设置,单机各项后方的删除按钮可以删除该列,勾选展示操作列可以增加操作列。列名:该列表头的显示名称。数据源:选择该列显示的数据。列宽:各列按所填数字的比例动态调整列宽,图例为100💯50,即2:2:1。高级设置:渲染为超链接:该数据项会被渲染为超链接样式。点击:设定点击该数据项时触发的事件,必须在勾选“渲染为超链接”时才有效。自定义代码:自定义该数据项的代码。是否隐藏:在选“是”时,该列会被隐藏。支持排序:勾选时该列可以进行排序。默认排序字段:在最开始加载完数据后依据此字段进行排序显示,可以选择默认升序或降序。对齐方式:该数据项在本列中的对齐方式,可选择左对齐、居中对齐或右对齐。列固定:设定该列固定出现在表格的最左侧或最右侧。 | |
设置操作列 | 操作列:对应操作的显示名称。交互动作:点击对应操作后执行的动作。 | |
顶部操作设置 | 显示顶部操作按钮 | 在表格顶部添加按钮组件。 |
显示搜索条 | 在表格顶部添加搜索组件,搜索样式可选择表单或搜索条。 | |
显示下载 | 在表格顶部显示下载按钮,可以下载表格内容。 | |
显示列设置 | 在表格顶部显示列设置按钮。用户在运行态可以点击该按钮来设置显示或隐藏指定字段。 | |
显示分页 | 在表格底部显示分页。 | |
移动端适配设置 | 展示模式 | 可以更改表格在移动端的展示样式。包括两种:默认列表:与PC端展示样式类似。卡片:以卡片形式展示每一条数据。 |
基础功能
表格组件是一个数据组件,可以关联对象建模中创建的对象,用以对该对象内多条记录的查看或相关操作。基本用法如下:
步骤1: 新建标准页面,如下所示:
步骤 2: 然后从左侧的组件列表拖动“表格”组件到画布区域,然后在右侧表格组件的属性面板中选择数据源,比如选择上下文:
步骤 3: 在选择对象属性中,点击后,可从弹窗中选择需要在该表单中展示的对象,比如“客户信息”,此时会提示“是否自动填充”,如下图所示:
步骤 4: 如果选择的是“确定填充”,则系统会自动生成表格布局,如下所示,用户可以根据实际业务场景对表格中的各列修改列名、更换数据源、调整列宽、调换顺序等。需要注意的是,操作列、顶部操作按钮等需要用户设定交互动作。启用搜索条后如果采用表单搜索,请见1.3节查询表单内容。
高级功能
- 支持指定列渲染为超链接
步骤 1:点击需要渲染为超链接的列后方的高级设置按钮。
步骤 2:勾选“渲染为超链接”。
步骤 3:添加点击事件,可以自定义添加该超链接点击后触发的事件。
步骤 4:配置超链接点击后序触发的事件,比如可配置打开页面、触发流程等等。
下图是配置超链接后的页面效果:
- 支持列样式自定义渲染
步骤 1:点击需要渲染为超链接的列后方的高级设置按钮。
步骤 2:勾选自定义代码,并自定义列样式。
- 支持操作列设置
步骤 1:在“设置列”的下方,勾选“展示操作列”。
步骤 2:在“设置操作列”中,点击“新增操作列”,并设置操作列的展示名称与交互动作。
下图是添加了操作列后的效果,操作列中按钮的效果
- 支持排序
步骤 1:点击需要渲染为超链接的列后方的高级设置按钮。
步骤 2:勾选“支持排序”,则在运行态下可以依据该列数据进行排序,针对需要排序的字段均可进行如下设置。如果勾选“默认排序字段”,则在刚加载数据时,会默认根据此列数据进行排序展示,可以设置默认升序或降序。
下图为配置第一个字段支撑排序的效果:
- 支持固定指定列
表格组件支持用户配置固定表格最左侧或最右侧的列。对应的属性设置如下图所示:
下图为设置为最右侧列固定时的样式:
下图为设置为最左侧列固定时的样式: