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

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

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

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

字典模式

字典模式下的左树右表常用于全局不常修改的树形数据,这种特点是全局对树形的数据都是一致的。接下来,我们看看具体的操作配置:

1、进入应用字典界面,如下图所示:

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

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

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

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

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

5、最终效果如下图所示

自定义树模型

在日常业务中,不仅需要固定的数据树形字典用于左树右表,很多情况是树形需要业务人员维护的,那么这种情况下,就需要自定义树模型,那么接下来我们看看这种模式下的左树右表配置过程:

1、构建一棵树模型

构建树模型可以使用普通列表页进行维护,如下图所示,本质上,各条数据就汇总形成了一棵树形结构

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

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

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

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

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

这里的设计是新增树形节点的相关配置,进入对应的设计界面。

7、最后配置效果如下:

8、在线demo:https://frame.bctools.cn/

Logo

低代码爱好者的网上家园

更多推荐