列表页到底是什么？
列表页是JVS快速开发平台中最基础、最核心的页面类型，用于展示和管理业务数据，作为业务系统中最基础的数据管理的方式。你可以把它理解成一个智能化的Excel表格，比Excel更严谨更系统化：
- ✅ 支持复杂的数据筛选和查询
- ✅ 可以直接在页面上进行增删改查操作
- ✅ 能和其他系统功能（如表单、流程）无缝对接
- ✅ 支持自定义页面布局和样式
在实际业务中，列表页通常用于各种数据管理的场景：
-
数据管理：用户管理、订单管理、产品目录、设备状态监控等数据展示
-
业务发起：数据审核发起入口、对数据批量操作、与业务联动的触发等业务处理
-
数据汇总：报表统计、数据可视化、业务分析等场景
5分钟创建第一个列表页
前置条件
- 你已经拥有JVS快速开发平台的账号，（体验地址可以直接扫二维码进入，也可以找商务的小伙伴开个独立的租户账号）
- 你已经创建了一个应用（如果还没有，请先创建一个轻应用）
操作步骤
步骤1：进入应用配置中心
- 登录JVS平台，点击顶部导航栏的「应用中心」，应用中心是应用设计人员的操作入口
- 在应用列表中找到你要操作的应用，点击「进入应用」或「配置」按钮
- 进入应用配置页面后，在左侧导航栏中找到「列表页设计」或在右侧的界面中点击「列表页设计」，如下图所示：
点击以后就计入到列表页的设计器中。
步骤2：创建新的列表页
方式一：通过目录创建（推荐新手使用）
1.点击目录右侧的「+」按钮或点击「列表页设计」选项，在弹出的页面类型选择中，选择「列表页」
2.输入页面名称，这里的名称与菜单的名称一致，例如：「固资类型」
3.点击「保存」按钮，系统即可完成第一个列表页的创建
方式二：通过快捷菜单创建
- 在已有的目录上点击，
- 点击后，在右侧的主界面中选择 “列表页设计”，这里表示在这个目录下 创建一个列表页？
- 输入页面名称并保存，完成第一个列表页的创建。
步骤3：配置基础字段
在你进入列表页设计器以后，点击列表页的设计界面，接下来配置最基础的字段：
- 添加第一个字段
- 在「全部字段」区域，点击「+ 添加字段」按钮
- 需要录入该字段的中文名称，或者选择系统中已经有的字段（数据模型中的默认字段）
- 批量添加字段（更高效）
- 点击「批量添加」按钮
- 在弹出的文本框中，每行输入一个字段名称，例如：
- 点击「确认」按钮，系统会自动生成对应的字段
- 设置字段属性
- 点击任意一个字段，右侧会显示该字段的详细配置
- 修改「显示名称」（页面中看到的名称）
- 系统会自动生成「字段名称」（数据库中存储的名称），通常不需要修改
步骤4：保存并查看效果
- 配置完成后，点击页面右上角的「保存」按钮
- 保存成功后，进入返回到应用中，刷新后可以查看实际效果
- 你会看到一个干净的列表页，表头显示了你刚才配置的字段名称
步骤5：测试基本功能
现在你的第一个列表页已经创建完成了，让我们测试一下基本功能：
- 查看列表页结构
- 你会看到列表页包含以下几个区域：
- 顶部操作栏：放置全局操作按钮（如批量删除、导出等）
- 查询条件区：用于数据筛选的输入框
- 表格展示区：显示具体数据内容
- 行操作区：每行数据右侧的操作按钮（编辑、删除等）
- 理解页面驱动模型
- 当你保存列表页时，系统自动创建了对应的数据模型
- 你可以点击「数据模型」按钮查看系统创建的表结构
- 这就是「页面驱动模型」的工作方式：先设计页面，系统自动生成数据模型
常见问题
Q：保存时提示字段名称冲突怎么办？
A：这是因为你输入的字段名称与系统默认字段或其他字段重复了。修改显示名称后，系统会重新生成字段名称，确保唯一性。
Q：如何修改已创建的字段顺序？
A：在字段列表中，用鼠标拖动字段即可调整顺序，或者使用字段右侧的「上移」「下移」按钮。
Q：我可以删除不需要的字段吗？
A：可以。在字段列表中，点击字段右侧的「删除」按钮即可。但要注意，如果该字段中已有数据，删除后数据也会丢失。
列表页核心组成部分解析
现在你已经成功创建了第一个列表页，让我们深入了解它的核心组成部分。理解这些概念，对于后续的高级配置非常重要。
1.3.1 列表页的四大核心区域
每个列表页都由以下四个区域组成，每个区域都有特定的功能：
查询条件区
- 位置：列表页顶部
- 功能：根据条件筛选数据
- 配置方式：在字段配置中开启「作为查询条件」选项
- 示例：员工管理列表中，可以按「姓名」「部门」「入职日期」等条件查询
- 重要性：⭐⭐⭐⭐⭐ - 用户最常用的功能之一
表级操作区
- 位置：查询条件区下方，表格上方
- 功能：对整个列表进行操作
- 常见按钮：新增、批量删除、导出、导入等
- 特点：不依赖单行数据，影响整个数据集
- 重要性：⭐⭐⭐⭐ - 批量操作的核心区域
数据展示区
- 位置：页面中央最大的表格区域
- 功能：展示具体数据内容
- 可配置项：
- 字段显示顺序
- 字段宽度
- 字段样式（颜色、字体等）
- 特殊显示效果（图片、链接、状态标识等）
- 重要性：⭐⭐⭐⭐⭐ - 列表页的核心展示区域
行级操作区
- 位置：每行数据的右侧
- 功能：对单行数据进行操作
- 常见按钮：编辑、删除、详情、查看等
- 特点：针对单条数据，不超过3个按钮时直接显示，超过3个会折叠
- 重要性：⭐⭐⭐⭐ - 单条数据处理的核心
1.3.2 数据模型与列表页的关系
数据模型是数据存储的基础，可以理解为数据库中的表结构，列表页是基于数据上进展示。
关键知识点：
-
列表页依赖数据模型：列表页展示的所有数据都存储在数据模型中
-
自动关联：创建列表页时，系统会自动创建对应的数据模型
-
动态同步：在列表页中新增或修改字段，保存后数据模型会自动更新
-
模型可查看：点击列表页设计中的「数据模型」按钮，可以查看和修改模型结构
数据模型的默认字段：
系统会为每个数据模型自动添加以下字段，你可以在列表页中直接使用：
-
创建人：记录是谁创建了这条数据 -
创建时间：记录数据创建的具体时间 -
修改人：记录最后一次修改数据的人 -
修改时间：记录最后一次修改的时间 -
数据ID：每条数据的唯一标识
💡 实用技巧：如果你需要记录数据的变更历史，这些系统默认字段会非常有用。在配置列表页时，可以选择性地添加这些字段进行展示。
1.3.3 页面驱动模型 vs 模型驱动页面
JVS平台支持两种配置方式，新手通常从「页面驱动模型」开始：
页面驱动模型（推荐新手或者产品经理等）
-
特点：先设计页面，系统自动生成数据模型
-
适用场景：快速搭建业务系统，不关心底层数据库设计
-
优点：所见即所得，配置简单，门槛低
-
操作流程：设计列表页 → 保存 → 系统自动创建数据模型
-
学习曲线：平缓，适合快速上手
模型驱动页面（适合开发者）
- 特点：先设计数据模型，再基于模型生成页面
- 适用场景：已有明确的数据结构设计，或者需要精细控制数据库
- 优点：数据结构可控，适合传统开发思维
- 操作流程：设计数据模型 → 生成页面 → 配置页面样式
- 学习曲线：一般，需要数据库基础知识
💡 新手建议：刚开始使用时，推荐使用「页面驱动模型」，因为它更直观，学习曲线更平缓。等你熟练后，可以根据实际需求选择合适的方式。
列表页设计器界面讲解
了解列表页设计器的界面结构，能让你更高效地完成配置工作。不同版本的设计器界面有所区别，我们分别介绍。
1.4.1 2.1.X版本设计器界面
进入列表页设计后，你会看到经典的左右分栏布局：
字段配置面板
-
① 数据模型信息：显示当前列表页绑定的数据模型名称，点击可以查看和修改模型详情
-
② 字段显示名称：在列表页表头显示的中文名称
-
③ 字段名称：数据库中存储的字段名称（可自动生成，也可手动修改）
-
④ 显示控制开关：控制该字段是否在列表页中显示
-
⑤ 高级样式设置：字段宽度、颜色、排序按钮、复制按钮等
-
⑥ 查询条件开关：开启后，该字段会出现在查询条件区
-
⑦ 快速检索设置：用于左树右表、Tab切换等快速检索场景
-
⑧ 字段排序：上下移动调整字段顺序
-
⑨ 删除字段：移除不需要的字段
-
⑩ 操作列设置：设置操作列的宽度和固定状态
预览与确认
- 实时预览列表页的配置效果
- 保存按钮，点击后保存配置并同步到数据模型
操作要点：
- 所有字段修改后，必须点击「保存」按钮才能生效
- 字段名称在第一次保存后不建议再修改，因为会影响数据库结构
- 样式修改可以实时在预览区看到效果
1.4.3 关界面元素详解
字段配置的核心参数
基础信息
- 显示名称：用户看到的字段名称（如"姓名"、"手机号"）
- 字段名称：数据库中存储的字段名（自动生成，如"name"、"phone"）
- 数据类型：会根据表单中选择的组件会自行的确定数据类型
显示控制
- 是否显示：控制该字段在列表页中是否展示
- 字段宽度：设置字段的显示宽度（栅格长度）
样式设置，支持固定样式与动态样式（根据字段值展示内容）
- 字体颜色：设置字段的文字颜色
- 背景颜色：设置字段的背景颜色
- 动态样式：根据字段值动态改变样式（如状态字段）
- 排序按钮：是否显示排序小按钮
- 快速复制：是否显示复制按钮，方便用户快速复制数据
查询设置
- 作为查询条件：开启后，该字段会出现在查询条件区
- 默认值：设置查询条件的默认值
操作按钮配置
按钮类型
- 表级按钮：对整个数据集进行操作（新增、批量删除、导出、导入等）
- 行级按钮：对单行数据进行操作（编辑、删除、详情等）
内置按钮， 系统提供了常用的内置按钮：
- 新增：打开表单添加新数据
- 编辑：修改选中的数据，会把当前选中的行作为修改的依据
- 删除：删除选中的数据
- 详情：查看数据的详细信息
- 导入：从Excel文件导入数据
- 导出：导出当前列表数据
- 模板下载：下载数据导入模板
自定义按钮， 你可以根据业务需求创建自定义按钮，并配置触发的功能：
- 打开表单页
- 触发逻辑流程
- 发起网络请求，触发网络调用
- 打开列表页
1.4.4 操作技巧与注意事项
高效操作技巧
- 批量添加字段：使用「批量添加」功能一次性创建多个字段
- 拖动排序：直接拖动字段调整顺序，比使用上移下移按钮更快捷
- 实时预览：新版本支持实时预览，配置时随时查看效果
- 保存提醒：修改后记得及时保存，避免配置丢失
常见错误规避
-
字段名称修改：第一次保存后，不建议再修改字段名称，因为这会重建数据库字段
-
数据类型变更：如果字段中已有数据，修改数据类型可能导致数据丢失
-
必填字段：配置查询条件时，注意哪些字段是必填的
-
权限控制：某些敏感字段（如薪资、手机号）需要注意权限控制
本章小结
通过本章的学习，你已经掌握了：
✅ 列表页的核心概念和应用场景
✅ 5分钟快速创建第一个列表页的方法
✅ 列表页四大核心区域的功能和配置
✅ 数据模型与列表页的关系
✅ 页面驱动模型 vs 模型驱动页面的区别
✅ 列表页设计器的界面结构和操作方法
现在你已经成功迈出了第一步！虽然创建的列表页还很基础，但已经具备了数据展示的完整结构。下一章，我们将深入学习如何配置字段、按钮和查询条件，让你的列表页功能更加完善。
下一步学习路径
- 如果你已经成功创建了列表页并理解了基础概念 → 继续学习第2章：基础配置
- 如果你对设计器界面还有疑问 → 回顾1.4小节的详细讲解
- 如果你迫不及待想实现具体功能 → 跳到第2章中对应的功能部分
本章重点概念回顾
| 概念 | 简单理解 | 重要程度 | 掌握程度 |
|---|---|---|---|
| 列表页 | 智能化的数据管理表格 | ⭐⭐⭐⭐⭐ | □ 未理解 □ 基本了解 □ 熟练掌握 |
| 数据模型 | 存储数据的数据库表 | ⭐⭐⭐⭐ | □ 未理解 □ 基本了解 □ 熟练掌握 |
| 页面驱动模型 | 先设计页面，自动生成数据模型 | ⭐⭐⭐⭐ | □ 未理解 □ 基本了解 □ 熟练掌握 |
| 查询条件区 | 用于筛选数据的输入框 | ⭐⭐⭐⭐⭐ | □ 未理解 □ 基本了解 □ 熟练掌握 |
| 表级操作 | 影响整个数据集的操作按钮 | ⭐⭐⭐⭐ | □ 未理解 □ 基本了解 □ 熟练掌握 |
| 行级操作 | 针对单行数据的操作按钮 | ⭐⭐⭐⭐ | □ 未理解 □ 基本了解 □ 熟练掌握 |
| 系统默认字段 | 自动记录创建人、时间等信息 | ⭐⭐⭐ | □ 未理解 □ 基本了解 □ 熟练掌握 |
| 设计器界面 | 配置列表页的核心工具 | ⭐⭐⭐⭐⭐ | □ 未理解 □ 基本了解 □ 熟练掌握 |
恭喜你完成了第1章的学习！ 🎉
你已经踏上了成为JVS快速开发平台专家的第一步。下一章我们将深入探讨字段配置、查询条件设计和按钮配置，让你的列表页功能更加完善和专业。 开源地址：gitee.com/software-mi…
