UIOTOS 示例11：表单数据双向读写 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等

合集 - UIOTOS文档（自动爬取）(49)

1.UIOTOS文档： 开始 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-212.UIOTOS文档：入门 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-213.UIOTOS文档： 常规（基础篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-214.UIOTOS文档： 嵌套（基础篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-215.UIOTOS文档： 布局 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-216.UIOTOS文档： 常规（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-217.UIOTOS文档： 连线（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-218.UIOTOS文档： 嵌套（高级篇） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-219.UIOTOS文档： 组件| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2110.UIOTOS文档： 公共 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2111.UIOTOS文档： 绘图 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2112.UIOTOS文档： 图表 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2113.UIOTOS文档： 表单 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2114.UIOTOS文档： 容器 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2115.UIOTOS文档： 函数 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2116.UIOTOS文档： 通信 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2117.UIOTOS文档： 视频 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2118.UIOTOS文档： 其他 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2119.UIOTOS文档： 导出部署与集成 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2120.UIOTOS 示例1：Hello World | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2121.UIOTOS文档： 随机颜色显示 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2122.UIOTOS文档： 扇叶（图标）旋转 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2123.UIOTOS文档： 上下层页面交互 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2124.UIOTOS 示例2：按钮弹窗显示文本| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2125.UIOTOS 初体验：指定沿轨迹运动 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2126.UIOTOS 示例3：视频选择播放| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2127.UIOTOS 初体验：长页面滑动| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2128.UIOTOS 初体验：计算器按键 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2129.UIOTOS 示例4：扩展按钮（文字可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2130.UIOTOS 示例5：扩展按钮（图标可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2131.UIOTOS 示例6：扩展按钮组（增加属性）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2132.UIOTOS 示例7：继承内嵌页事件并使用 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2133.示例8：数据的解析提取 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2134.UIOTOS 示例9：接口数据给树表格 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2135.UIOTOS 示例10：表单请求接口 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-21

36.UIOTOS 示例11：表单数据双向读写 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-21

37.UIOTOS 示例12：接口查询曲线展示 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等2024-08-2138.UIOTOS文档：初体验：不规则按钮 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat2024-08-2739.UIOTOS文档：示例13：MQTT数据给图形 | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat2024-08-2740.最新零代码，套娃一样开发IoT应用！2024-08-2941.前端零代码，套娃一样开发界面！2024-08-2942.【开源】前端“神器”，开发界面无代码！2024-08-3143.2024强烈推荐8个精选的中后台前端低代码开源框架2024-08-3144.一款能开发上位机和后台系统的WEB组态！2024-08-3145.物联网平台市场崩了吗？2024-09-0246.可视化拖拉拽？过时了！2024-09-0547.前端组态化 3：矢量绘图与UI界面无缝融合2024-09-0648.一觉醒来，Qt、C#界面开发的天塌了？2024-09-1049.UIOTOS示例：自定义弹窗输出表单数据 | 前端低代码 前端零代码 web组态 无代码 amis goview dataroom 界面嵌套 蓝图连线 nodered2024-09-24

收起

目标

示例10：表单接口请求用到表单数据。本示例介绍如何获取表单数据，以及加载回写到页面。前者通常用于接口请求，后者则是加载返回的数据，增删改查（CURD）时尤为常见。效果如下：

步骤

内嵌页

包含有输入框、单选框、文本框等表单组件，如下所示：

新建

略。参见1新建。命名为巡检点基本信息。

拖放组件

拖入输入框、单选框、文本框组件，并设置属性：

步骤1：拖入输入框。

• 输入框1（巡检点名称）
  • 基础标识中输入pointName，用于对应表单数据的字段（参见组件标识自定义）。

• 对值内容属性设置纯表单（点击，面板中选择formValue，参见纯表单使用）。

仅设置本属性为纯表单属性，此时前面的标识pointName，与当前属性值，将构成表单数据中的一项键值对。

• 外观

设置输入框对应的标签文本，以及显示的位置（默认在左侧，这里调整到上方）。

  - `标签文本`中输入：`*巡检点名称：`。
  - 勾选`标签内嵌`、`垂直排布`。

• 其他输入框

输入框2（区域）、输入框3（楼层）、输入框4（ID）分别设置如下：

• 标识中：region、floor、id。
• 标签文本：*区域：、*楼层：、*ID:。
• 值内容：参照输入框1，也设置为纯表单。
• 勾选标签内嵌、垂直排布。
  步骤3：拖入单选框。
• 基础
  • 标识中输入：state。与上面输入框类似，用于对应表单中的字段。

• 功能
  • 数据内容长度为2，索引0、1分别设置启用、禁用。
  • 索引值设置为纯表单。

与步骤1中的输入框一样，前面标识和这里索引值将构成表单的键值对。

• 外观

设置单选框标签文本的显示位置（默认在左侧，这里调整到上方）。

• 勾选标签内嵌。
• 排布方式选择L形排布。

步骤4：拖入文本框。

• 基础标识中输入：remark。用于对应表单数据的字段（参见组件标识自定义）。

• 功能-值内容属性设置纯表单（点击，面板中选择formValue，参见纯表单使用）。

仅设置本属性为纯表单属性，此时前面的标识remark，与当前属性值，将构成表单数据中的一项键值对。

• 外观

设置输入框对应的标签文本，以及显示的位置（默认在左侧，这里调整到上方）。

• 标签文本中输入备注。
• 勾选标签内嵌。
• 勾选垂直排布。

布局

全部所有组件，右键菜单中，选择自动布局，(参见布局)。

主页面

用于加载表单，获取和回写表单数据。如下所示：

• 用工具函数获取表单数据。
• 按钮点击，执行工具函数，获取数据弹窗显示。
• 弹窗中修改数据，回写到表单页面。

新建

略。参见1新建。命名为表单数据双向读写。

拖放组件

拖入按钮、嵌套容器、对话框组件，获取组件属性值函数，并设置属性：
步骤1：拖入按钮，属性设置：外观-文字中输入提交

步骤2：拖入嵌套容器，属性设置：

• 外观-去掉勾选开启阴影

• 功能-勾选纯表单

为什么要勾选纯表单，有什么作用？

效果如下：

页面嵌套

嵌套容器嵌套前面的内嵌页（操作参见容器嵌套）。

注意：如果对于表单页面比较长，小屏幕显示容易挤压时，方便上下滑动显示，这时可以加上滚动页。

属性继承

这里需要用到将内嵌页的表单属性，选择继承上来，以确保内嵌页的表单属性在当前页可用。（参见连线-高级篇属性继承），如下所示：

注意：可以通过属性过滤搜索，检查确认容器的纯表单属性

连线操作

容器嵌套的表单页面，数据由获取组件属性值获取，按钮点击执行，输出给对话框并弹窗显示，修改后回写。
步骤1：函数主动获取纯表单数据无关联属性（嵌套容器）→ 输入(组)（获取组件属性值）

注意：属性不关联将传递表单，参见关联事件（属性）什么时候可以省？

步骤2：按钮的点击执行函数无关联属性（按钮）→ 执行（获取组件属性值）

注意：此时不关联属性，相当于传入true，参见目标属性为开关类型时，传入对象相当于开（true）

步骤3：函数给对话框传值并使其弹窗输出（获取组件属性值）→ 值内容（对话框继承的内页）
无关联属性（获取组件属性值）→ 弹窗（对话框）

注意：同上，此时不关联属性，相当于传入true。

步骤4：对话框给内嵌页表单赋值 值内容（对话框继承的内页）→ 无操作属性（嵌套容器）。详见如何对表单页面赋值？

小结

表单读写对于增删改查（CURD）极为重要。常见的表单界面，有组件直接构成，不存在嵌套。UIOTOS支持多层嵌套，表单对应的组件可能在不同层页面，单并不影响双向读写，本示例提供了典型实践。