利用微搭低代码实现级联选择

简介: 利用微搭低代码实现级联选择



日常我们在开发小程序时,经常需要级联选择。所谓的级联选择就是要求我们根据前边选择的内容来进行过滤,进行后续项目的选择。我们本篇就介绍一个常见的场景,健康信息上报。在健康信息上报场景中我们需要先进行班级注册。由学生家长自主选择班级进行后续的健康信息填报。

微搭低代码制作应用是分为几个步骤:

  1. 创建数据源
  2. 录入数据
  3. 创建应用
  4. 功能开发

1 创建数据源

我们这里如果需要注册班级信息,需要拆分为三个数据源,分别是年级、班级和学生班级。

年级数据源

打开微搭低代码控制台,找到数据源,新建一个数据模型

输入数据模型的名称,标识会自动生成

点击编辑,进入编辑模式,添加字段

录入字段名称,这里要注意就是年级名称需要设置成主列字段。因为无论是在PC端或者移动端,如果设置了主列字段的,在关联关系里是显示的主列字段的值,要不然就是一串英文,也对用户也不友好。

最后设置好的效果

班级数据源

同理也需要先创建数据模型

先添加一个班级名称的字段,也需要把班级名称设置成主列字段

再添加一个所属年级的字段,字段类型设置成关联关系,设置成关联关系的原因是因为我们在添加班级的时候需要选择年级

这里我们选择的关联类型是多对一,所谓的多对一和真实场景是一样的,一个年级下有多个班级。删除的话看个人需要,可以保留班级,也可以做关联删除

最终结果

学生班级数据源

我们现在是按业务把表拆分开了,但是实际的情况是我们真实在选年级、选班级的时候都是需要有弹出选择的效果的。目前关联关系这种类型可以直接生成为弹出选择,所以我们还需要创建一个数据源,叫学生班级。新增一个数据模型

我们需要添加两个字段,一个是所属班级,一个是所属年级,都是关联关系,选择对应的数据源即可。

为了标识是哪个学生,我们可以添加一个openid字段

最终的效果:

2 录入数据

数据源创建好了之后需要录入基础数据,点击数据源列表的更多,点击管理数据,我们先添加年级数据

点击新建就可以新增一条数据了,我们加两个年级,分别是一年级和二年级

然后添加班级数据,每个年级添加三个班级,注意我们的年级是弹出选择的

3 创建应用

因为我们是开发小程序,所以在创建应用的时候选择小程序就可以了

应用创建好了之后我们需要创建一个变量,用来保存用户选择的年级信息。后续再依据年级过滤班级的时候也需要这个变量。点击变量管理,添加一个年级的变量,类型是string

4 功能开发

我们利用表单容器来自动生成页面,选择学生班级数据源

选中所属年级组件,给该组件添加一个行为,选择其他事件,当值改变时候我们就将用户选中的值赋值给刚刚定义的变量

所属班级要设置过滤条件,根据年级的选择情况,过滤出对应的班级来。选中所属班级组件,设置选项筛选

这样就设置好了

总结

我们本篇讲解了一下级联的操作,低代码的优势是全程无需编写代码,只需要一步步的设置即可,低码编程还是挺有优势的,感兴趣赶紧实操一下吧。

相关文章
|
3月前
|
存储 数据管理 数据库
CRUD操作实战:从理论到代码实现的全面解析
【7月更文挑战第4天】在软件开发领域,CRUD代表了数据管理的四个基本操作:创建(Create)、读取(Read)、更新(Update)和删除(Delete)。这四个操作构成了大多数应用程序数据交互的核心。本文将深入讲解CRUD概念,并通过一个简单的代码示例,展示如何在实际项目中实现这些操作。我们将使用Python语言结合SQLite数据库来演示,因为它们的轻量级特性和易用性非常适合教学目的。
183 2
|
5月前
|
存储 数据采集 数据挖掘
整行数据处理:概念、应用与代码实现
在数据处理和数据分析的过程中,整行数据操作是一个常见的需求。整行数据通常指的是数据表(如Excel、CSV或数据库表)中的某一行数据,它包含了该行的所有列信息。处理整行数据有助于我们快速进行数据的筛选、排序、修改或删除等操作,从而更好地理解和利用数据。
67 0
|
5月前
|
Java
java实现遍历树形菜单方法——Dao层
java实现遍历树形菜单方法——Dao层
死锁检测组件原理及代码实现
死锁检测组件原理及代码实现
|
安全 搜索推荐
如何避免写重复代码?两种常见的方法:抽象和组合
如何避免写重复代码?两种常见的方法:抽象和组合
224 0
|
开发工具 对象存储 Python
需求文档及代码实现
compare hdfs & oss files
114 0
|
前端开发 容器
微搭低代码实现查询功能
微搭低代码实现查询功能
微搭低代码实现查询功能
|
C++
三元组代码实现
三元组代码实现
182 0
|
设计模式 数据安全/隐私保护
# 设计原则与思想 --- 重复代码or依赖反转原则(DRY)
# 设计原则与思想 --- 重复代码or依赖反转原则(DRY)
|
Web App开发 API 数据库
零代码实现一对一表关系和无限主子表级联保存
本文主要介绍一对一关系和无限主子表在crudapi系统中的应用。一对一关系是指关系数据库中两个表之间的一种关系。关系数据库中第一个表中的单个行只可以与第二个表中的一个行相关,且第二个表中的一个行也只可以与第一个表中的一个行相关。
292 0
零代码实现一对一表关系和无限主子表级联保存