低代码开发重要工具：jvs列表页中如何实现左树右表的配置

左树右表是一种数据查询展示方式，通常用于处理带有层级关系的查询条件的数据展示。它的基本思想是将一个大表分成左树和右表，左树是一个树形结构，右表是一个扁平的表。通过在左树上建立索引，可以大大提高查询效率。

左树右表的实现方式是先对左表进行分组和排序，然后将右表与左表进行联接。由于左表已经按照某个字段进行排序，可以利用这个排序结果进行快速匹配。这种方法避免了对整个大表进行全表扫描，因此能够大大减少查询时间和资源消耗。

在JVS列表页配置中，左树右表有两种配置实现的方式：左侧树的基本信息来源于系统中提供的树形字典 ；另外一种方式 ，左侧的树来源于自定义数据模型；

接下来我们详细介绍下配置的方式

字典模式

字典模式下的左树右表常用于全局不常修改的树形数据，这种特点是全局对树形的数据都是一致的。接下来，我们看看具体的操作配置： 1、进入应用字典界面，如下图所示：

可以导入字典，也可以手动创建字典

2、完成字典配置后，进入列表页的配置界面，选择左树右表的模式

3、进入列表页的新增上配置新增表单，将对应字段设置为字典，采用级联组件配置对应字段关联树形字典

在数据创建过程中，关联字典

4、回到列表页配置器中，在表格配置页面， 字段上会根据类型判断，如果是一个树形字段，系统会自动生成快速检索的开源配置项，将开关设置为启用状态，即可实现左树右表的样式

5、最终效果如下图所示

自定义树模型

在日常业务中，不仅需要固定的数据树形字典用于左树右表，很多情况是树形需要业务人员维护的，那么这种情况下，就需要自定义树模型，那么接下来我们看看这种模式下的左树右表配置过程： 1、构建一棵树模型 构建树模型可以使用普通列表页进行维护，如下图所示，本质上，各条数据就汇总形成了一棵树形结构

2、进入列表页的配置界面，选择左树右表的模式

3、将模型中的对应字段设置为树形模型， 从列表页的新增按钮中进入表单设计器

4、新增表单配置器中，选择级联组件、关联字段数据、设置关联模型，保存

5、返回列表页中配置快速查询

6、（可选）可设置树形字段界面上扩展树形数据，进入 快速检索的配置按钮，这里实现的逻辑是在树形筛选器上，可设置相关操作按钮

这里的设计是新增树形节点的相关配置，进入对应的设计界面。7、最后配置效果如下：

8、在线demo：***************************