一文读懂-如何建立多对多的左树右表

一文读懂-如何建立多对多的左树右表原创

犹豫

7人赞赏了该文章 3,133次浏览编辑于2021年12月13日 09:51:24

摘要由AI智能服务提供

本文提供了一个在项目开发中实现多对多关系（如组织-人员、比赛项目-运动员）的左树右表功能的详细案例。首先，通过体育比赛为例，建立了比赛项目和运动员的基础资料。接着，通过开发平台创建了动态表单，并配置了表单的入口参数及插件参数。然后，通过编程实现了树的初始化、节点设置、根据树节点设置过滤条件以及树的查询功能。最终，成功展示了左树（比赛项目）和右表（运动员）的联动效果，并增强了节点的搜索和点击便捷性。总结实现步骤包括创建元数据、配置参数、初始化树、设置节点、设置过滤条件和设置查询功能。

在苍穹中，组织和人员是多对多的关系，一个组织包含多个人员，一个员工也可能存在多个组织。那么如果在项目开发中也有这样的需求该如何去做呢？下面就给大家做个简单的案例。

我们以体育比赛为例，一个比赛项目包含多名体育运动员，一名运动员也可能多报名多个项目。首先需要一个树形基础资料，比赛分为多个项目，有些项目还需要区分男子组、女子组等，如下图所示建立基础资料：

其次，需要建立运动员信息，一名运动员可能报名多个项目，所以我们需要增加一个报名项目的单据体，建立如下图所示建立基础资料：

最后就是需要建立一个动态表单来以左树右表的方式来展示我们的体育项目和远动员之间的关系。首先需要在开发平台【开发服务云-领域通用框架-首页】找到【树形列表】并继承。

创建完成后需要在【权限控制】将此动态表单发布到我们需要的应用下

发布之后，需要到对应的应用下添加菜单

最重要的一步就是配置参数，需要配置两个参数，formId和billFormId，其中formId就是刚刚建立的动态表单的标识，而billFormId是我们需要展示的基础资料的标识，即运动员的标识。

保存完成之后，可以先来看一下效果。

已经实现了右表的效果，我们需要通过插件来展示左树信息，插件加在动态表单中。

接下来，我们对插件内容做一下说明，首先需要定义5个常量名称，分别是树形基础资料（比赛项目），右表中基础资料的单据体标识（运动员报名项目列表），右表中与左树关联的基础资料标识（运动员具体报名项目），总体分类名称（包含所有运动员），未分类名称（没有报名任何项目的运动员）。如果说不想了解具体功能是如何实现的，那么配置完这5个常量之后，部署插件就可以使用完整的功能了。

但是作为一名coder，肯定是想要了解的更多，那么下面讲解下插件中每个方法是做什么用的。

首先要初始化一个树，设定一个根节点

第二步就是完善整个树，当刷新某个节点时，即当刷新某个比赛项目时，查询这个项目的所有的直接下级项目，并把这些项目创建为树的节点放到整个树中

配置完成之后，重新打开页面我们已经可以看到左侧已经出现了我们需要的树形结构，并且包含总分类和未分类

此时虽然可以打开下级，但是需要我们点击树中节点名称左侧的箭头来打开下级，操作便捷性很差

所以我们要对节点名称的点击事件进行监听，当我们点击节点名称时，自动打开下级节点

目前已经完成了左侧树，右侧列表的展示，下面就是将两者关联起来，在点击左侧树的时候，可以对右侧列表的数据进行过滤。过滤条件总共分为3部分，根节点，非根树节点和未分类节点。如果点击根节点则不设置过滤条件，即查询所有数据。未分类节点就是查询没有报名项目的数据，即报名项目为空的数据。非根树节点就是查询该节点以及该节点所有子节点的数据，即报名某个项目和他所有下级项目所有的数据。

查询非根树节点下的数据，要先查询该节点下的所有节点，并把所有节点的ID作为集合加入到过滤条件中

增加完过滤条件后，效果如下：

到了这一步左树右表的功能已经完成90%，最后一步就是实现左侧树的搜索。左侧树搜索逻辑比较复杂，首先需要设置3个缓存值，分别是查询结果缓存，查询内容缓存，查询视图缓存。查询视图缓存主要判断是否是当前视图，如果视图改变，则清空所有缓存。查询内容缓存指本次搜索内容与上次搜索内容相同则从缓存中拿节点，不同则重新查询。查询结果缓存指对第一次搜索结果进行缓存处理，如果再次查询内容相同，则从查询结果缓存中获取并将上一次的查询结果删除，保证不会重复查询。