- 最新动态
- 功能总览
- 产品介绍
- 计费说明
- 快速入门
-
用户指南(低代码)
- AstroZero低代码使用流程
- 授权用户使用AstroZero并购买实例
- 添加AstroZero开发者用户
- 使用AstroZero创建应用
-
使用AstroZero开发应用后端
- 应用后端开发概述
- 对象
- 事件
- 脚本
-
服务编排
- AstroZero服务编排概述
- 创建空白AstroZero服务编排
- 定制已有AstroZero服务编排
-
为AstroZero服务编排设置图元
- 为AstroZero服务编排添加子服务编排图元
- 为AstroZero服务编排添加脚本图元
- 为AstroZero服务编排添加记录创建图元
- 为AstroZero服务编排添加记录删除图元
- 为AstroZero服务编排添加记录查询图元
- 为AstroZero服务编排添加记录更新图元
- 为AstroZero服务编排添加发送邮件图元
- 为AstroZero服务编排添加发送事件图元
- 为AstroZero服务编排添加赋值图元
- 为AstroZero服务编排添加循环图元
- 为AstroZero服务编排添加跳出循环图元
- 为AstroZero服务编排添加决策图元
- 为AstroZero服务编排添加等待图元
- 为AstroZero服务编排添加BO图元
- 为AstroZero服务编排添加连接器图元
- 为AstroZero服务编排添加生成文档图元
- 管理AstroZero服务编排
- 自定义AstroZero服务编排的URL
- 触发器
- 工作流
- 定时任务
-
使用AstroZero开发应用前端
- 应用前端开发概述
-
标准页面
- AstroZero标准页面概述
- 创建空白AstroZero标准页面
- 使用模板创建AstroZero标准页面
- 为AstroZero标准页面添加组件
-
设置AstroZero标准页面组件属性
- 设置AstroZero标准页面容器组件属性
- 设置AstroZero标准页面表单组件属性
- 设置AstroZero标准页面表格组件属性
- 设置AstroZero标准页面分栏组件属性
- 设置AstroZero标准页面栅格容器组件属性
- 设置AstroZero标准页面列表视图组件属性
- 设置AstroZero标准页面表格(新)组件属性
- 设置AstroZero标准页面图片组件属性
- 设置AstroZero标准页面二维码组件属性
- 设置AstroZero标准页面分页组件属性
- 设置AstroZero标准页面模态框组件
- 设置AstroZero标准页面输入框组件属性
- 设置AstroZero标准页面下拉框组件属性
- 设置AstroZero标准页面按钮组件属性
- 设置AstroZero标准页面上传组件属性
- 设置AstroZero标准页面面包屑组件属性
- 设置AstroZero标准页面视频播放组件属性
- 添加事件实现AstroZero组件间交互
- 添加库扩展AstroZero标准页面功能
- 查看AstroZero标准页面性能
- 调测AstroZero标准页面
- 将AstroZero标准页面保存为模板
- 管理AstroZero标准页面
-
高级页面
- AstroZero高级页面概述
- 创建AstroZero高级页面
- 为AstroZero高级页面添加组件
-
设置AstroZero高级页面预置组件属性
- 设置AstroZero高级页面轮播组件属性
- 设置AstroZero高级页面图片组件属性
- 设置AstroZero高级页面文本编辑组件属性
- 设置AstroZero高级页面自定义背景框组件属性
- 设置AstroZero高级页面基本柱图组件属性
- 设置AstroZero高级页面基本折线图组件属性
- 设置AstroZero高级页面基本饼图组件属性
- 设置AstroZero高级页面水位图组件属性
- 设置AstroZero高级页面散点图组件属性
- 设置AstroZero高级页面雷达图组件属性
- 设置AstroZero高级页面仪表盘组件属性
- 设置AstroZero高级页面翻牌器组件属性
- 设置AstroZero高级页面路由导航和路由视图组件属性
- 为AstroZero高级页面添加自定义组件
- 为AstroZero高级页面组件绑定数据
- 添加事件或宏实现AstroZero高级页面组件交互
- 调测AstroZero高级页面
- 查看AstroZero高级页面性能
- 管理AstroZero高级页面
- 报表
- 使用AstroZero进行应用集成开发
- 使用AstroZero对应用进行个性化设置
- 发布并部署AstroZero开发的应用
- 管理AstroZero中已安装的应用
- AstroZero低代码平台管理中心
-
经典版开发指导
- 经典版入门必读
- 应用
- 对象
- 标准页面
- 高级页面
- 服务编排
- 脚本开发
- BPM服务编排
- API接口
- 集成开发
- 消息事件
- 触发器
- 报表和仪表板
- CICD持续集成与交付
- 服务组件(BO)
- 调测能力
- 工程能力
- 原生服务
- 其他功能
- 管理中心
- 白名单特性
- 用户指南(零代码)
- 最佳实践
- API参考
-
常见问题
- 高频常见问题
- 产品咨询类
-
应用后端开发
- 如何区分不同账户间的数据库对象?
- 在AstroZero对象中删除字段后重新创建时,引用的地方报错
- 如何刷新AstroZero对象的页面布局?
- 如何彻底删除AstroZero应用目录树中的数据?
- AstroZero自定义对象预置的owner字段,用于记录什么用户?
- AstroZero脚本支持使用哪些语言和库?
- 在AstroZero脚本中执行sql语句时,可以不用@useObject修饰数据对象吗?
- 在AstroZero脚本中,如何返回zip压缩文件内容?
- 如何通过AstroZero脚本,导出xls文件让用户下载?
- AstroZero脚本中是否支持multipart/form-data请求?
- AstroZero服务编排中涉及数据操作的脚本图元,在其他图元操作失败的情况下,是否可以回滚?
- 事件触发的AstroZero服务编排,发送事件后,服务编排没有运行?
- 在AstroZero服务编排或工作流中,引用的资源无法编辑
- 如何实现一个资源被多个AstroZero应用的服务编排调用?
- 在AstroZero服务编排中,支持跨应用引用资源吗?
- 在AstroZero服务编排、工作流或脚本中,邮件发送功能不可用?
- AstroZero开发者如何使用自己的邮箱发送邮件?
-
应用前端开发
- 在AstroZero标准页面中,如何调用服务编排或脚本?
- 在AstroZero标准页面组件较多时,如何快速选中组件?
- 表格字段太多,导致AstroZero标准页面无法完整显示,该如何处理?
- 在AstroZero标准页面中,如何实现有子表的表格?
- 在AstroZero标准页面中,如何实现下拉框选项值的筛选功能?
- 在AstroZero标准页面中,如何实现移动端上拉异步加载数据功能?
- 如何查看AstroZero标准页面的URL格式?
- 在AstroZero标准页面弹窗的onOk事件中,不想关闭弹窗该怎么处理?
- 在AstroZero中编排高级页面时,如何实现不加载组件库资源?
- 在AstroZero中自定义高级页面组件(widget)时,修改了JS文件,修改部分不生效?
- 在AstroZero组件库中,部分组件在组件详情页看不到更新和编辑入口
- 在AstroZero高级页面中,如何进行统一的HTTP状态拦截?
- 配置高级页面组件桥接器实例属性时,如何设置下拉框中的选项值?
- 在AstroZero高级页面中,如何实现所有组件都加载完成后,再执行某段逻辑?
- 在AstroZero中,如何实现多人协作开发?
- 在AstroZero运行环境中,如何实现游客访问标准页面?
- 应用发布与部署
- Astro轻应用平台管理中心
- 视频帮助
- 文档下载
- 通用参考
链接复制成功!
表格
表格是一个组合组件,与模型绑定之后,可以提供快速构建基本表单能力,包括查询、保存、重置能力。同时,支持用户根据实际业务需求,进行二次修改编排。
在标准页面设计界面,从“基本组件”中,拖拽“表格”组件至页面工作区域,如图1。
查看组件帮助
将鼠标放在对应的组件上,单击,可查看组件说明。

- 表格列 > 已添加列
合并:在已添加列中,选择了某几列,再单击“合并”,即可合并为一个大列,选中的列将作为大列的子列显示。
分解:在已添加列中,选中某个包含多个子列的大列,再单击“分解”,即可分解此大列。
添加字段:表格的列,当表格组件绑定了数据模型后,可选择绑定的模型中的字段成为表格的列,以及表格的查询条件。
添加操作列:表格的列,在表格中添加可操作列,即在操作列中通过添加图标,并为图标添加onclick事件代码,实现某些功能,如删除、编辑等。
添加空白列:表格的列,可添加表格空白列。
- 表格分区 > 工具栏:扩展表格能力,为表格添加工具栏,提供增删改查以及保存的功能按钮。
- 扩展属性
- 自动加载数据:仅当模型为对象模型时有效,启用后,预览或加载页面时,将自动加载数据,不需要通过事件触发。
- 可编辑:启用后,表格中每行的内容是否能进行编辑操作,不启用则内容为只读。
- 单选:启用后,显示单选按钮。
- 多选:启用后,显示多选按钮。
- 行号:启用后,表格首列显示当前行号。分页时行号重新从1依次开始,不累加。
- 累加行号:和“行号”只能启用其中一个,启用后,表格首列显示当前行号,分页时行号累加上前一页依次显示。
- 最小列宽:设置最小列宽值。
- 加载中状态:是否显示表格加载中状态。
- 空数据提示:数据为空时,显示的提示内容。
- 筛选为空提示:筛选数据为空时,显示的提示内容,仅当列筛选时生效。
- 树形数据:当表格中的数据有父子关系,可开启树形数据,并指定关联字段后,可展示出树形结构。
- 默认展开:开启树形数据时,子数据是否默认展开。
- 可选择:开启树形数据时,是否启用父子关联选择。
- 图标显示字段:开启树形数据时,图标所在位置显示的字段。不配置,就是第一列的字段。
- 父节点字段:开启树形数据时,关联的父节点字段。
- 子节点字段:开启树形数据时,关联的子节点字段。
- 根节点字段值:开启树形数据时,根节点的字段值。不配置默认为空。
- 子节点缩进:子节点缩进,单位px。
- 行拖拽:开启树形数据时,是否启用行拖拽,拖拽行可改变数据的父子结构。
- 风格
- 尺寸:设置表格的尺寸。
- 显示表头:启用后,表格显示标题行。
- 斑马纹:启用后,表格会间隔显示不同颜色,用于区分不同行数据。
- 纵向边框 : 启用后,显示一个纵向的选择框。
- 高度跟随内容:表格行高度是否跟随内容多少变化。
- AUI风格:是否开启AUI风格。
- 表头样式类:表头固定的class类名。
- 数据行样式类:表数据行class类名的回调方法,支持自定义各行数据不同的class类名。
- 合并行或列:合并行或列的计算方法,支持自定义设置行或列的,单元格合并规则。
- 公共
- 控件名称:当前组件的名称。
- 隐藏:是否隐藏该组件,此方式为静态配置该组件的隐藏。还可以将该组件属性值“隐藏”配置为布尔类型模型字段,在自定义JS代码中来控制模型字段取值,从而设置该组件是否隐藏,这种动态设置优先级是最高的。
- 样式
- 表格宽高:设置表格的宽度和高度。
- 布局:设置表格显示样式、内外边距、宽高。
- 字体:设置字体大小、字体样式、颜色等。
- 背景:设置背景颜色、透明度。
- 阴影:设置阴影颜色、模糊、扩散等,单位为px。
- 高级设置
- 样式源码:组件具体样式代码,组件样式设置后,样式代码将自动显示在“样式源码”中。也可以自定义样式代码,对组件进行详细配置,自定义代码支持多行输入,并高亮显示样式参数。
- 样式类:当前组件使用的CSS样式类名,可在CSS代码中进行引用。
- 样式透传:启用后,可以将设置好的样式透传给组件的子节点。
事件
在事件中,显示了组件暴露出来的一些常用事件,供用户实现,来扩展组件的交互。整个页面有加载(on-load)事件,该事件在页面渲染完成后执行,可进行数据初始化操作。更多关于事件的介绍,请参见主要事件说明。
库
在库中,可配置页面需要的依赖库,扩展页面功能。库分为系统预置库和自定义库两种,更多介绍请参见如何引入第三方库。
绑定数据模型、增加查询条件、工具栏
设置组件绑定的数据模型,有自定义对象、对象、服务和事件四种,本章节以绑定模型为例进行介绍。
- 在表格的“属性 > 数据绑定”中,单击
,进入选择模型页面。
- 在选择模型页面,单击“新增模型”。
- 设置表格的元数据模型,模型名称设置“equipmentInstance”,来源选择“对象”,单击“下一步”。
图3 创建对象数据模型
- 在选择对象页面,选择一个提前创建好的对象,例如“HW__Equipment__CST”,“选择字段”中选择表单中需要展示的字段,单击“下一步”,单击“确定”。
- 返回选择模型页面,勾选创建好的元数据模型,单击“确定”。
绑定对象模型后,显示如下图所示。如果需要在每行添加行序号,可在表格的“扩展属性”中打开“行号”。
图4 绑定数据模型后的结果列 - 选中上图中“已添加列”中的任意一项,单击
,调整列的显示顺序。
- 单击上图中每个字段后的
,修改列标题、是否隐藏、是否可编辑等字段属性。
以“设备编码”为例,其属性配置如下图所示。在配置列标题时,可选择已有多语言、创建或更新多语言,此处创建的多语言会保存在租户的多语言库中。
图5 设置“设备编码”列的属性 - 为表格增加操作列。
- 在左侧“设计视图”中选中“表格”,单击右侧“属性 > 表格列”中的
。
- 单击新建表格列,即Operation1后的
。
图6 新建列 - 在“属性配置”页面,修改“列标题”为“操作”。
- 在“操作按钮”中,单击“添加操作按钮”,设置“编辑”按钮的样式,如下图所示。
- 在上图中单击
事件图标,单击“动作列表”后的“+”号,在弹出的事件编排器右侧代码编辑区,添加如下事件代码,单击“创建”。
//获取当前组件(即table) let _component = context.$component.current; //获取当前行row,取对象的id属性 let rowId = _component.$attrs.row.id; //带着id跳转到设备详情页面 context.$page.load('/besBaas/page#/HW__editEquipment?id='+rowId);
- 返回标准页面开发界面,单击页面上方的
,保存页面。
- 按照上述操作,再次单击“添加操作按钮”,添加“删除”按钮。
参照图7,设置按钮的“类型”为“主要按钮” 、“图标”为“android-delete”。
- 单击
事件图标,在弹出的事件编排器右侧代码编辑区,添加如下事件代码,单击“创建”。
//获取当前组件(即table) let _component = context.$component.current; //获取当前行 let row = _component.$attrs.row; // 表格组件 let _table = this.$component.table; // 删除当前行数据 this.$dialog.confirm({ title: '确认框', content: '确认是否删除?', okText: "确定", cancelText: "取消", onOk: () => { _table.doDelete([row]).then(()=>{_table.doQuery();}) } })
- 返回标准页面开发界面,单击页面上方的
,保存页面。
- 在左侧“设计视图”中选中“表格”,单击右侧“属性 > 表格列”中的
- 设置工具栏区域。
- 在左侧“设计视图”中,选中“表格”,单击右侧“属性 > 表格区块 > 工具栏”后的“添加”。
- 删除上图工具栏中多余的按钮,只保留“新增行”、“保存”和“删除”按钮。
- 单击页面上方的
,保存页面。
树形数据功能介绍
当表格中的数据有父子关系,可在表格属性中开启“树形数据”开关,并指定关联字段后,可展示出树形结构。
- 首先查看数据对应的对象,查看数据列的字段名。
若需要构造如图8所示的数据,在新建对象,新增如下图所示自定义字段后,打开布局页签,选中“对象名Records”数据记录页,新增图8所示的数据。
- 在标准页面中,选中表格组件,新增模型,设置为对象模型,选中1中的对象,设置表格数据源。
图10 设置数据绑定图11 新增模型图12 设置对象模型图13 设置关联字段图14 选中模型
- 在标准页面中选中表格组件,开启“树形数据”开关,参考属性设置如下参数。
- 单击页面上方的
,保存页面。
- 单击
,预览该页面,可查看到如图15所示层级关系。
引申说明
表格组件需要以树形展示有个前提条件,即表格绑定的模型中存在取值上有父子关系的两个字段。

上述模型中,“主管”字段的值来源于“名称”,这两个字段就可以认为是父(主管)子(名称)关系,而“部门”字段仅在逻辑上和“名称”是父子关系,取值上并不是,这一点极易混淆。基于上述前提,就可以在表格的属性面板中绑定上述模型,开启“树形数据”开关,然后配置“主管”为父字段,“名称”为子字段。

