【JVS低代码配置平台】基于树形字典的纯配置实现左树右表

奋斗吧
奋斗吧
擅长邻域:未填写

标签: 【JVS低代码配置平台】基于树形字典的纯配置实现左树右表 博客 51CTO博客

2023-03-28 18:23:29 173浏览

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表,左树右表是我们在业务管理系统中常见的业务形态,如下图所示,树形结构用于多层级的数据的展示,列表页作为对应数据的横向行级展现。实现树形的配置有两种模式,一种是根据树形字典配置(简单导入即可),这种配置简单,把静态的树形字典导入到系统中,一种是以纯配置的形式(根据业务灵活调整),实现一个树形字典的数据模型,再根据左树右表的方式配置。基于树形字典的配置左树右表1、进入即可实现树形字典的配置,如下图所示:

左树右表是我们在业务管理系统中常见的业务形态,如下图所示,树形结构用于多层级的数据的展示,列表页作为对应数据的横向行级展现。

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_低代码

实现树形的配置有两种模式,一种是根据树形字典配置(简单导入即可),这种配置简单,把静态的树形字典导入到系统中,一种是以纯配置的形式(根据业务灵活调整),实现一个树形字典的数据模型,再根据左树右表的方式配置。


基于树形字典的配置左树右表

1、进入即可实现树形字典的配置,如下图所示:

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_低代码_02


2、对字典支持导入、界面调整

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_字段_03


3、创建列表页,设置左树右表模式

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_低代码_04


4、新增表单关联对应系统字典字段

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_数据_05


5、完成列表页字段关联设置

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_字段_06



配置效果如下:

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_低代码_07


基于自定义模型的配置左树右表

1、创建树模型,这个模型是可以根据业务需求灵活独立创建,在模型新增表单中配置相关组件,注意父级目录字段使用下拉组件关联当前模型(此处为文档目录)

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_表单_08

在树模型的新增表单中设置如下:

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_字段_09

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_数据_10



2、新建列表页(左树右表),页面设置中布局设置选择目录,字段中加入树模型字段。在新增表单中,树字段使用级联选择组件,数据类型选择数据模型,关联模型选择树模型(此处为文档目录),传递值选择数据id


【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_低代码_11


【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_低代码_12


在新增表单中设置级联组件,组件的数据类型选择“数据模型”,关键对应的配置的数据模型

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_数据_13


3、保存表单后回到列表页,刷新重新加载列表设计页面,可以看到树模型字段出现可开启“快速检索”开关,打开开关。返回列表页面(此处为文件管理页面)即可新增数据,选择对应目录会将数据绑定到对应树节点中。

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_表单_14

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_字段_15

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_字段_16


4、扩展。在列表设计(此处为文件管理页面)中可以对树配置额外按钮,可选择按钮的类型,触发表单或者逻辑。

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_数据_17

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_字段_18


此处配置一个表单,设计表单修改一些字段属性。在此示例中,属性表单修改的数据为树模型中字段的数据。

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_表单_19

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_表单_20

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_数据_21

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_数据_22


配置的效果如图所示:

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_表单_23



可以登录JVS的体验地址(frame.bctools.cn),查看更多的功能的配置方法,软开企服,一站式技术供应商。

【JVS低代码配置平台】基于树形字典的纯配置实现左树右表_数据_24

开源地址:https://gitee.com/software-minister/jvs


好博客就要一起分享哦!分享海报

此处可发布评论

评论(0展开评论

暂无评论,快来写一下吧

展开评论

您可能感兴趣的博客

客服QQ 1913284695