---
order: 17
navTitle: 装载数据
---
# SuperPage交互-装载数据

**装载**就是将数据通过某个载体显示出来，**装载数据**交互支持在当前页面的指定组件或容器中加载数据，无需打开新的页面或对话框，其效果与**显示对话框/悬浮面板**的[加载数据](./show-dialog.md#loadData)类似，如在左侧列表中选择企业名称，在右侧显示该企业的详细信息：

![](./images/2021_05_10_18_06_01_879.gif)

示例地址：[列表-列表交互](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E5%88%97%E8%A1%A8)

## 使用装载数据{#how-to-use}

**装载数据**交互，作用于两个组件之间，即发起装载的主体组件和数据装载的目标组件：

- **主体组件**：一般为展示数据的组件，如[树](https://docs.succapp.com/v5/superpage/component/tree)、[列表](../../components/data/list.md)等
- **目标组件**：任意能获取模型表数据的组件均可，可以是单个组件如[文本输入](../../components/input/textinput.md)、[文本](../../components/common/text.md)等；也可以是包含多个组件的容器，如[面板](superpage/component/panel)等

当点击主体组件的某一行数据时，通过**装载数据**交互，这行数据的更多信息将在目标组件中显示出来。以在列表中选择企业名称，右侧显示该企业的详情为例，具体使用步骤如下：

![](./images/2021_05_11_11_51_51_597.gif)

1. **引用字段**：在面板中添加[文本](../../components/common/text.md)组件，并为组件设置字段内容`${[企业基本信息].[企业名称]}`，该字段所在模型表需要与**列表**组件引用的模型表一致
2. **为列表组件添加交互**：在列表的**交互**中选择**装载数据**，指定**数据范围**为**当前行**，**范围**为**指定组件**，**提交组件**为panel28

:::tip
**树**组件不支持**当前行**的数据范围，若使用**树**作为主体组件，一般需要使用两个模型表，一个作为左侧列表的数据，一个用来作为右侧显示的数据，具体用法与[主体和目标组件使用不同模型表](#differ)一致
:::

### 主体和目标组件使用不同模型表{#differ}

主体组件与目标组件使用的模型表不同时，需要搭配[设置参数值](./set-param-value.md)交互获取选择行的数据，以左侧树中选择资产列表，在右侧显示该资产的详细信息为例，实现思路如下：

1. 设置全局参数`a`接收选中行的主键信息
2. 在主体组件上使用**设置参数值**对参数进行赋值，并设置**装载数据**交互
3. 在目标组件引用的模型表上使用该全局参数进行过滤，如`[资产信息维护-表单].[资产编码]=[a]`

当点击数据行时，**装载数据**交互将主动发起一次查询请求，得到模型表过滤后的数据，最终将该结果填入指定的容器或组件中

示例地址：[树增加与修改](https://demo.succbi.com/v5/DEMO/app/ap.app?id=%E6%A0%91%E5%A2%9E%E5%8A%A0%E4%B8%8E%E4%BF%AE%E6%94%B9)

## 需要装载的数据范围{#range}

**装载数据**交互支持设置加载哪些符合条件的数据，在**数据范围**属性中提供了两种可选项：

- **勾选的**：一般搭配**列表**或**勾选框**等具有勾选效果的组件使用，仅装载勾选的数据行数据，同时需要设置主体组件，交互将仅装载选择的主体组件中的内容
- **当前行**：一般与**列表**搭配使用，仅装载当前选中的数据行的数据，默认为**当前行**

## 目标组件设置{#display}

**装载数据**交互能够对数据展示的目标组件进行设置，在**范围**属性中选择：

- **默认**：该选项为默认项，如果主体组件在对话框组件中，则该对话框内的组件进行装载；若不在，则整个页面内的组件进行装载
- **整个页面**：将整个页面内的组件进行装载
- **所在对话框/悬浮面板**：主体组件所在的对话框或悬浮面板内的组件进行装载
- **指定组件**：选择后，需要在**提交组件**中勾选显示数据的目标组件