本文档为您介绍表单组的配置方法。如果您是DataV专业版用户,可以将多个高级交互组件进行编组,形成一个表单组。通过表单组,您可以在蓝图编辑器中实现交互筛选功能。

建立表单组

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

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

    表单组后与普通成组功能的区别为:表单组建立后会额外增加清空提交按钮,并且表单组没有限制,可以多次生成。

    清空和提交按钮
    表单组建立之后,表单组外围及内部新生成的清空提交按钮会自动导出到蓝图编辑器。
    说明 表单组本质上是个快捷操作,主要在蓝图编辑器配置中使用。在创建表单组的同时,DataV会自动绑定提交按钮和清空按钮与表单组之间的连线与交互,只需配置表单提交事件和表单清空事件的交互即可。

取消表单组

选择需要取消的表单组,右键单击鼠标,选择取消成组即可。

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

清空按钮交互配置

表单组建立后,在蓝图编辑器页面的画布中,可以看到如下图所示的清空按钮的交互配置参数。

清空按钮交互配置
类型 事件/动作 说明
事件 当数据接口请求完成时 数据接口请求返回,抛出经过过滤器处理后的事件,同时抛出处理后的JSON格式的数据。
点击按钮时 当点击按钮时抛出的事件,同时抛出该按钮的内部数据。
动作 请求数据接口 重新请求服务端数据,上游转换器或图层节点抛出的数据将作为参数。例如,清空按钮配置了API数据源为http://api.test,传到请求接口描述动作的数据为{ id: '1'},则最终请求接口为http://api.test?id=1
导入数据接口 按组件绘制格式处理数据后,导入组件,重新绘制。不需要重新请求服务端数据。
更新组件配置 动态更新组件的样式配置。需要首先在组件的配置面板中,单击复制配置到剪贴板,获取组件配置数据。再根据需要,在蓝图编辑器配置页面的数据处理节点中,更改对应样式的字段值。
显示 显示组件,不需要参数。
隐藏 隐藏组件,不需要参数。
切换显隐状态 切换组件显示或者隐藏。
参数示例:
    {
      // 显示为true,隐藏为false。
      "status": true,
      // 显示动画。
      "animationIn": {
        // 动画方式,可选fade,不填无动画。
        "animationType": "fade",
        // 显示延时,单位为ms。
        "animationDuration": 1000,
        // 显示动画函数,可选linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      },
      // 隐藏动画。
      "animationOut": {
        // 动画方式,可选fade,不填无动画。
        "animationType": "fade",
        // 隐藏延时,单位为ms。
        "animationDuration": 1000,
        // 隐藏动画函数,可选linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }
移动 将组件移动到指定位置。
参数示例:
    {
      // 移动方式。绝对定位:by,相对定位:to。
        "positionType": "by",
      // 指定位置。x坐标,y坐标。
      "attr": {
        "x": 0,
        "y": 0
      },
      // 动画方式。
      "animation": {
        "enable": false,
        // 动画延时。
        "animationDuration": 1000,
        // 动画曲线。可选值为:linear|easeInOutQuad|easeInOutExpo。
        "animationEasing": "linear"
      }
    }

提交按钮交互配置

提交按钮的交互配置参数如下,与清空按钮类似,详情请参见清空按钮交互配置

提交按钮交互配置

表单组应用操作示例

以下示例以高级交互组件中的单选框输入框,以及地图组件中的基础平面地图为例,为您演示表单组在蓝图编辑器的具体使用方法。

  1. 在大屏编辑器页面,搭建所需要的单选框输入框基础平面地图组件。
  2. 同时选中单选框输入框组件,单击鼠标右键,选择成表单组
  3. 同时选中单选框输入框基础平面地图,单击鼠标右键,选择导出到蓝图编辑器
  4. 确认导出后,单击顶部左侧菜单栏的蓝图编辑器图标(蓝图编辑器图标)。
  5. 蓝图编辑器页面,查看自动生成的表单组交互配置。

    DataV会自动生成与编辑器页面中的表单组对应的交互配置,表单组两边清空按钮提交按钮,分别绑定了清空表单提交表单的动作。当单击了对应的按钮时,会触发对应的表单响应事件。

    表单组蓝图配置
  6. 在左侧的导入节点面板中,将基础平面地图组件拖到画布中。
  7. 表单组事件中的当表单被提交时事件,与地图上的请求数据接口或者导入数据接口动作连线,即可触发地图上被筛选后的内容更新。
    表单组配置连线
  8. 添加其他连线和数据处理节点,并进行节点配置。
  9. 配置完成后预览并发布,即可在大屏项目中实现表单组的交互效果。

    详情请参见操作示例