从入门到精通：JVS低代码列表页与表单、流程、逻辑嵌套使用的全面教程

列表页，作为应用程序中极为常见的一种界面类型，其核心功能在于以列表的形式展示一系列数据项。这些数据项可以是商品、用户、任务、消息等各种实体或信息。列表页通过清晰、有条理的布局，使用户能够快速浏览、查找和定位所需的信息，极大地提高了信息获取的效率。

列表页的在业务系统中，它是用户与应用程序进行交互操作的基础入口，用户通过列表页可以直观地了解到轻应用所提供的主要功能和内容，从而进一步进行查询和操作；其次，列表页是数据展示和管理的有效手段。

通过列表页，用户可以方便地查看、筛选、排序和操作数据，实现了数据的可视化管理和高效利用，最后列表页是多种业务触发的承载，可以通过列表页的按钮触发其他的功能（如：逻辑、表单、列表钻取等）

接下来我们看下，在JVS低代码中列表页和其他组件是如何嵌套使用的。

列表页与模型

列表页可以通过模型进行直接创建列表页，也可以在创建列表页的过程中系统自动生成模型。列表也是业务数据的展示，模型是业务数据存储的物理位置，所以JVS中两种方式都是支持的。

1、以数据模型自动生成列表页

点击进入应用的模型管理页面，如下图所示，点击应用的logo（①），系统展示应用的详情页面，点击数据模型（②）管理页面，系统展示本应用中所有的模型列表，以及新增、查询的操作按钮，点击新增（③）按钮，系统弹出新增界面。

点击新增按钮后，系统直接根据配置会创建列表页如下图所示，输入 模型名称、字段展示名称、字段物理名称（系统自动生成，可以人工修改）、选择字段类型、保存提交。

完成模型构建后，可以点击生成设计按钮，这里就会把对应模型直接快速生成CRUD（包括列表页、表单、修改、详情）等页面。

从而实现了数据模型-->页面的设置过程，这个过程往往比较适合在已经清楚了业务需求后，数据库比较清晰明确的情况下（将已经有的系统重新构建）使用。

2、以列表页自动生成数据模型

在很多情况下，可能是需要实施人员和需求发起人员一边交流，一边逐步梳理业务功能，那么这种模式下，就比较适合先构建页面，由系统自动创建数据模型。那么我们看下配置的步骤：
在轻应用中，点击目录，在右侧的操作按钮上选择创建列表页（表示在该目录下构建对应的列表页）：

①：进入对应的需要修改的应用
②：点击目录，右侧展示可以在这个目录下创建的功能
③：点击列表页设计，系统进入列表页的设计引擎
在列表页的设计引擎中，一旦点击创建界面所需要的字段，设置字段的详细配置，然后点击保存，系统会自动生成对应的数据模型：

①：通过创建单一字段或者批量字段，增加列表页上显示的数据
②：设置每个字段的具体配置，以达到业务的需求
③：点击保存，这里的保存 会触发两个动作 一个是列表页的设计、一个是对数据模型的新增或者修改
④：可以点击设置 修改数据模型的名称、可以查看对应的数据模型，如下图所示：

列表页按钮触发（表单、逻辑、列表）

表单是轻应用中用于数据输入和提交的重要方式。在列表页中嵌入表单，可以实现数据的快速添加、编辑或删除，提高用户的工作效率，列表页与表单的整合方式多种多样。例如，我们可以在列表页的顶部或底部添加“新增”按钮或者自定义按钮，点击后弹出表单窗口供用户输入新数据；或者我们可以在列表页的每一行数据后面添加“编辑”和“删除”按钮，点击后分别弹出编辑表单和确认删除对话框。
那么我们看下如何形成具体联动的，点击列表页的设计，进入列表页的配置界面：

①：在列表页的设计页面保存生成后，可以看到模型的具体配置内容
②：可以设置列表页的按钮（按钮触发对应的功能）
③：设置按钮的位置，是顶部按钮还是行内按钮（表级、行级）
④：设置触发的方式（触发表单、触发逻辑、触发列表等）
⑤：进入对应的设计器（如果选择的是表单，那么就进入表单设计器，如果选择的是逻辑，就会进入逻辑的设计器）

触发表单：在按钮中设置触发表单，点击设置即可进入表单的设计器中
触发列表：如下图所示，选择触发列表时，系统会提示选择列表页，设置触发列表页的展示形式(弹窗、新页面打开)

列表触发列表可以理解为 数据钻取的效果，如下图所示：

触发逻辑：在列表页的按钮中设置触发逻辑，点击设置，即可进入逻辑的设计器中
也就是在列表页的按钮上点击后，可以触发执行的逻辑。

配置的方式如下图所示：

列表页触发流程

列表页触发流程需要稍微复杂一点，需要分成几个步骤执行：
1.根据列表页构建流程
2.然后在表单提交的按钮上，通过按钮触发逻辑
3.让逻辑把启动流程的参数传入流程
根据列表页创建流程：
选中对应的列表页，在弹出的菜单上选择创建流程，本质上是根据相同的数据模型创建业务审批的流程：

找到这个列表页需要触发流程的位置，往往是表单 提交后触发流程，那么在触发表单的数据设置页面，设置后置触发业务逻辑：

在逻辑中启动对应的流程：

实现的效果，如下所示：

开源框架：https://gitee.com/software-minister/jvs
在线demo：https://frame.bctools.cn