本文档为您介绍表单组的配置方法。如果您是DataV专业版用户，可以将多个高级交互组件进行编组，形成一个表单组。您可以使用表单组在节点编程配置页面中实现预期的交互筛选功能。

建立表单组

  1. 创建一个空白模板的大屏项目，并添加几个高级交互组件。
  2. 在图层栏或画布中单击选中多个高级交互组件，或者拖拉鼠标，将想要归为一类的组件选中。
    建立表单组
  3. 单击鼠标右键选择成表单组，将这几个组件添加到一个表单组中。

    表单组建立之后，可双击组标题重命名。

    表单组后与普通成组功能的区别为：表单组建立后会额外增加清空和提交按钮，并且表单组没有限制，可以多次生成。
    说明 表单组本质上是个快捷操作，主要在节点编程配置中使用。在创建表单组的同时，DataV会自动绑定提交按钮和清空按钮与表单组之间的连线与交互，只需配置表单提交事件和表单清空事件的后续交互即可。

取消表单组

选择需要取消的表单组，右键单击鼠标，选择取消成组即可。
取消表单组
注意
  • 取消表单组后，该组里面的组件将全部回归到未成组状态。各组件相互独立，不再以组合为单位进行拖拉移动等操作。
  • 取消表单组后，清空按钮和提交按钮不会消失，只能手动删除。

清空按钮交互配置

表单组建立后，在大屏编辑页面中，单击顶部菜单栏的配置节点编程图标，进入节点编程配置页面。将左侧组件列表中表单组下的清空按钮拖入画布中，可以看到如下图所示的清空按钮的交互配置参数。
清空按钮交互配置
  • 事件
    • 当数据接口请求完成时

      数据接口请求返回并经过过滤器处理后抛出的事件，同时抛出处理后的JSON格式的数据。

    • 点击按钮时

      当点击按钮时抛出的事件，同时抛出该按钮的内部数据。

  • 动作
    • 请求数据接口

      重新请求服务端数据，上游转换器或图层节点抛出的数据将作为参数。例如清空按钮配置了API数据源为http://api.test，传到请求接口描述动作的数据为{ id: '1'}，则最终请求接口为http://api.test?id=1。

    • 导入数据接口

      按组件绘制格式处理数据后，导入组件，重新绘制。不需要重新请求服务端数据。

    • 更新组件配置

      动态更新组件的样式配置。需要首先在组件的配置面板中，单击复制配置到剪贴板，获取组件配置数据。再根据需要在节点编程配置页面的转换器中更改对应样式的字段值。

    • 显示

      显示组件，不需要参数。

    • 隐藏

      隐藏组件，不需要参数。

提交按钮交互配置

表单组建立后，在大屏编辑页面中，单击顶部菜单栏的配置节点编程图标，进入节点编程配置页面。将左侧组件列表中表单组下的提交按钮拖入画布中，可以看到如下图所示的提交按钮的交互配置参数。

提交按钮中的事件和动作的参数配置与清空按钮类似，详情请参见清空按钮交互配置。

表单组应用操作示例

以下示例以高级交互组件中的单选框、输入框和基础平面地图组件为例，为您演示表单组在节点编程的具体使用方法。

  1. 在可视化大屏编辑器页面搭建所需要的单选框、输入框和基础平面地图组件。
  2. 同时选中单选框和输入框组件，右键单击成表单组。
    提交按钮交互配置
  3. 单击大屏编辑页面右上角的配置节点编程图标，进入节点编程配置页面。
    DataV会自动生成与编辑器页面中的表单组对应的交互配置，并显示在节点编程配置页面的画布中。表单组两边清空按钮和提交按钮分别绑定了清空表单和提交表单的动作。当单击了相对应的按钮时就会触发相对应的表单响应事件。
    表单组节点编程配置
  4. 将基础平面地图组件添加到画布中，将表单组事件中的当表单被提交时与地图上的请求数据接口或者导入数据接口动作连线，即可触发地图上被筛选后的内容更新。
    节点编程配置连线
  5. 添加其他节点连线和转换器，并进行转换器的配置，配置完成后预览并应用，即可在大屏项目中实现该交互链路下的预期效果。详情请参见操作示例。