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

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

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

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

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

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

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

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

配置效果如下:
图片

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

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

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

图片

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

图片

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

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

图片

图片

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

图片

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

图片

图片

图片

配置的效果如图所示:
图片

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

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


软件部长
35 声望4 粉丝

软件研发行业老司机,提供些踩坑的经验而已