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

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

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

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

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

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

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

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

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

配置效果如下:
图片

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

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

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

图片

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

图片

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

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

图片

图片

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

图片

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

图片

图片

图片

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

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

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


低代码系列
带领研发团队专攻代码开发项目,开源其中部分功能。这里做详细的介绍。

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

27 声望
2 粉丝
0 条评论
推荐阅读
低代码开发重要工具:jvs-rules 规则引擎功能介绍(四)
JVS-Rules采用业务与技术分离的思路,业务人员可以配置和业务相关的内容,可以不考虑底层变量的配置,只需要配置对业务的描述,具体实现的变量绑定可以由技术人员参与,这里就体现了技术与业务规则可以解耦。

软件部长阅读 100

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.7k评论 9

涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco22阅读 2.2k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan23阅读 1.7k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2k

封面图
【代码鉴赏】简单优雅的JavaScript代码片段(一):异步控制
Promise.race不满足需求,因为如果有一个Promise率先reject,结果Promise也会立即reject;Promise.all也不满足需求,因为它会等待所有Promise,并且要求所有Promise都成功resolve。

csRyan26阅读 3.3k评论 1

「彻底弄懂」this全面解析
当一个函数被调用时,会创建一个活动记录(有时候也称为执行上下文)。这个记录会包含函数在 哪里被调用(调用栈)、函数的调用方法、传入的参数等信息。this就是记录的其中一个属性,会在 函数执行的过程中用到...

wuwhs17阅读 2.4k

封面图

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

27 声望
2 粉丝
宣传栏