# 多级树节点展示科研项目过程

来源快照：`result_data_new_260518.json`

- 来源 ID：`1970003945862118876`
- 模块：低代码平台e-builder
- 目录：专题学习 - 场景专题 - 页面（仪表盘）专题
- space ID：`1157961794811633670`
- 原文链接：未提供
- 产品基线：未提供

## 正文

**1.  ****场景说明  **

在页面树组件的使用过程中，我们可以通过添加多个树节点，使多张表单中的关联字段形成关联关系，从而形成多级树节点。例如在科研项目管理中，有“项目信息表”、“项目阶段表”、“阶段任务表”三张表单。三张表单为逐级关系，一个项目分为多个阶段，一个阶段又存在多个任务。如果用户只是点击三张表的台账进行信息的阅览，则无法清晰的了解“项目-阶段-任务”之间的直接关系，此时就可以利用页面树组件进行项目过程的展示，展示效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705368168325121&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

** **

**2.  ****功能简介**  

上述场景就是利用页面-树组件功能实现的。在搭建页面之前，我们需要了解树组件所取数据源的上下级联系，找到关键的关联字段；之后在页面设计器中将页面整体布局进行分栏，一般在左边栏放入树组件，设置树组件根节点；然后添加多个树节点，通过关联字段设置各个树节点之间的上下级关系；最后设置节点的动作，打开表格视图或表单显示布局等。

  


**3.  ****操作说明**  

**1.****搭建项目-阶段-任务三张表单，明确关联关系**

在科研项目管理过程中，一个项目立项之后会分成多个阶段，每个阶段又会有多个任务。即任务关联阶段，阶段又关联项目。因此在表单搭建的过程中，在阶段表中加入关联e-Builder字段，关联项目信息；在任务表中同样放入该字段，关联任务信息，从而形成三张表单的关联关系。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705368100478990&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D) 

**2.****搭建页面，进行页面整体设计**

在表单直接的关联关系确认之后，我们就可以利用页面-树组件将三张表单进行分级展示。首先需要进行页面的整体布局规划，在正常情况下，含有树组件的页面一般采用“左边栏”，将树组件放入左侧，另一侧展示详细信息。在本场景中，由于页面上方需要使用数字面板统计数据信息，因此使用“上左右”布局，并将树组件放在页面左侧：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705368170266659&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

 

**3.****配置树组件，完成分级展示效果**

**3.1****配置根节点**

树组件节点分成两类：根节点与树节点，根节点可以启用/关闭，其可以帮助用户在刚进入页面时，直接展示一些信息。例如在本场景中，我们利用根节点展示项目信息台账，当用户进入该页面时，就能直接看到所有的项目信息：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705372546441222&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

**3.2****配置树节点**

树组件主要的配置为树节点，本场景中包含项目、阶段、任务三张表单，需要逐级配置三个树节点。

首先看一级：科研项目。在该级节点中，数据源选择表单“项目信息表”，设置主键、显示名，需要注意的是，由于本场景中并非本表字段进行上下级展示，因此无需选择上级。节点动作选择打开显示布局，即展示该条项目信息的详情。由于项目信息为一级节点，没有上级，所以最下方的“上级节点设置”也无需设置：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705372572344337&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

之后是二级：项目阶段，同样的设置数据源、主键、显示名等，此时为了形成上下级关联，我们需要配置“上级节点设置”。首先选择上级节点，即我们的一级节点：科研项目，之后需要为两个节点设置关联，在本场景中，我们在二级节点项目阶段的表单内放入了关联e-Builder字段，并设置字段名称为“项目名称”，此时我们就可以在本节点字段中选择“项目名称”，从而形成关联，上级节点字段无需设置。

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705376682762243&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)

最后是三级：阶段任务，设置方式与上文相似，上级节点设置为“项目阶段”，字段选择阶段任务表单中的关联字段即可。

设置完成后，在页面中可以看到左侧树组件的上下级显示，最终的展示效果如下：

![](https://weapp.eteams.cn/papi/file/preview?fileId=1157705381162278915&type=redirect&customParam=%7B%22isExtDist%22%3Atrue%2C%22distributeId%22%3A%22%22%2C%22externalId%22%3A%22%22%2C%22appId%22%3A%22%22%7D)
