• 告别单调的列表页,探索JVS低代码列表页设计的新思路


    列表页是什么?

    列表页是管理平台中的基础页面,核心的逻辑是实现数据的增删改查(CRUD),列表页核心的几个要素:页面内容的数据展示、查询条件、页面按钮及按钮触发的逻辑。

    列表页配置

    具备应用配置权限的用户,可以在列表页目录上,鼠标悬空,系统会弹出列表页设计的菜单,如下图所示:

    点击“设计页面”,系统进入列表页设计器,其中包括四个板块的设计内容:

    • 页面基础信息的设计

    如下图所示,展示“页面设置”的功能界面

    ①:点击“笔”图标,修改列表页的名称

    ②:设置列表页的名称,这里的名称和目录下面的菜单名称相同

    ③:设置列表页的备注描述

    ④:列表页的布局设置,其中包括普通列表、左树右表、卡片布局三种模式

    ⑤:预览列表页最后效果的地址,支持复制和查看

    其中包括列表页名称,这里的名称就是目录上展示的页面名称,页面描述会在界面上展示为列表页的备注说明

    页面布局有三种模式,普通布局(如上图所示),树表布局(如下图所示),卡片布局(如下图所示)

    预览地址是可以直接在浏览器上通过url访问到这个列表页的页面展现。

    • 列表页设计

    进入列表页设计界面,本页面主要提供列表页界面展示的数据配置,如下图所示:

    ①:模型设置,这里是列表页关联的数据模型设置入口

    ②:列表页的数据设置tab界面

    ③:字段排序的设置tab界面

    ④:列表页上的按钮设置的tab页面

    ⑤:列表页上展现数据时,默认过滤设置tab页面

    ⑥:列表页上展示数据的详细配置

    ⑦:增加一列数据字段的操作按钮

    ⑧:预览配置列表页的效果预览按钮

    点击排序条件tab页,展示如下图所示

    ①:字段下拉选择框,选择需要排序特殊设置的字段

    ②:系统会自动展示对应字段选择框中的 字段类型

    ③:排序下拉选择框,选择升序与降序设置

    ④:删除本条排序设置按钮

    ⑤:新增一个字段的排序设置

    • 页面权限设置

    页面权限包括两种类型的,如下图所示

    ①:操作权限:对界面的按钮、目录等操作的权限设置(后续章节详细介绍)

    ②:数据权限:对用户查看的数据内容进行控制(后续章节详细介绍)

    • 数据设置

    主要用于列表页从excel文件导入时,对文件导入前的校验,导入后联动触发相应的逻辑,如下图所示

    列表页的数据设置核心的能力都是借助逻辑引擎的处理能力,点击前置/后置的逻辑设计,都是跳转逻辑引擎进行相应功能配置。

    以上是关于列表页的全面介绍。列表页作为管理平台中的基础页面,发挥着数据增删改查的重要作用。通过理解列表页的核心要素,以及掌握其设计和配置方法,用户可以有效地管理和操作数据,实现高效的数据管理和处理。

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

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

  • 相关阅读:
    2022.7.28面试总结
    Kafka 安装教程和基本操作
    【Flink 实战系列】Flink 消费多个 Topic 数据利用侧流输出完成分流功能
    编码标记物智能识别系统(YOLO v5+Opencv实现)
    继承(六)—— 菱形继承的问题以及解决方案(初识虚基表)
    LeetCode 901. 股票价格跨度【单调栈】1708
    ABB MPRC086444-005数字输入模块
    在Unity快速搭建一个接收http请求
    如何学习 Linux 内核内存管理
    springboot中实现查看flowable流程图和xml文件功能
  • 原文地址:https://blog.csdn.net/jonyleek/article/details/133880509