《JeecgBoot系列》 如何设计表单实现“下拉组件二级联动“ ? 以省市二级联动为例

news/2024/3/28 22:13:18/文章来源:https://blog.csdn.net/m0_51197424/article/details/129172230

《JeecgBoot系列》 如何设计表单实现"下拉组件二级联动" ? 以省市二级联动为例

一、准备字典表

1.1 创建字典表

CREATE TABLE sys_link_table (
id int NULL,
pid int NULL,
name varchar(64) null
);

1.2 准备数据

idpidname
1全国
21浙江省
32杭州市
42宁波市
51江苏省
65南京市
75苏州市
81广东省
98广州市
108珠海市

在这里插入图片描述

二、创建测试表单

2.1 新增表单

在这里插入图片描述

2.2 表单数据库属性

新增字段省:province

新增字段市:city

在这里插入图片描述

2.3 页面属性

页面属性->province字段组件类型设置为联动组件

在这里插入图片描述

2.4 检验字段

校验字段-> province字段字典table填如下json :

{table: "sys_link_table",txt: "name",key: "id",linkField: "city",idField: "id",pidField: "pid",condition:"pid = '1'"
}
名称描述
table数据库表名
txt控件显示的值
key控件需要存储的值
linkField级联组件的其他字段名称,上例配置了市,区字段名
idField数据的标识
pidField上下级关系的表示字段
condition联动组件 第一个下拉框的数据查询条件

在这里插入图片描述

2.5 同步数据库

同步数据库后,会根据当前配置表结构,在数据库中创建对应表

在这里插入图片描述

三、功能测试

功能测试方便调试表单内容

在这里插入图片描述

3.1 新增-测试联动效果

当新增数据时,如选择浙江省,则根据联动效果,会提供浙江省对应的市下拉框,提供选择

在这里插入图片描述

3.2 查看数据

因为字典表是sys_link_table,表单对应的表是sys_link_test

在选择表单中选择省的时候,会从sys_link_table中取name作为值。

当联动到市的时候,会取对应的id作为值。

在这里插入图片描述

四、表单优化

如上图所示,字段“市"的值是数字,查看不太方便。

可以选择使用字典,匹配对应的值。

4.1 新增字典

创建字典sys_link_city

在这里插入图片描述

4.2 配置字典

sys_link_table中的id作为数据值,name作为名称

在这里插入图片描述

4.3 校验字段-city字段配置字典

将新增的字典名sys_link_city,配置到city字段的字典Code处

在这里插入图片描述

4.4 再次查看数据

字段city配置好字典后,再次查看已经比较清晰。

在这里插入图片描述

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.luyixian.cn/news_show_72762.aspx

如若内容造成侵权/违法违规/事实不符,请联系dt猫网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

投出1000份简历,苦于软件测试没有项目经验,全部石沉大海,辞职5个月,我失业了......

想要找一份高薪的软件测试工作,简历项目必不可少(即使是应届生,你也要写上实习项目)。所以很多自学的朋友找工作时会碰到一个令人颇感绝望的拦路虎:个人并没有实际的项目工作经验怎么办? 怎么办&#xff1f…

Kotlin新手教程九(协程)

一、协程 协程从Kotlin1.3开始引入,本质上协程就是轻量级的线程。协程的基本功能点有: 轻量:可以在单个线程上运行多个协程,因为协程支持挂起,不会使正在运行协程的线程阻塞。挂起比阻塞节省内存,且支持多…

python -- 魔术方法

魔术方法就算定义在类里面的一些特殊的方法 特点:这些func的名字前面都有两个下划线 __new__方法 相当于一个类的创建一个对象的过程 __init__方法 相当于为这个类创建好的对象分配地址初始化的过程 __del__方法 一个类声明这个方法后,创建的对象如果…

缺少IT人员的服装行业该如何进行数字化转型?

服装行业上、下游产业链长,产品属性复杂,是劳动密集型和技术密集型紧密结合的产物,是典型的实体经济代表。 近二十年是服装业发展的机遇和挑战之年,从“世界工厂”“中国制造”,逐渐向“中国设计”转变,中国服装产业经…

c++常用stl算法

1、头文件 这些算法通常包含在头文件<algorithm> <functional> <numeric>中。 2、常用遍历算法 for_each(v.begin(),v.end(), 元素处理函数/仿函数) 注意&#xff1a;在使用transform转存时&#xff0c;目标容器需要提取开辟合适的空间。 void printfunc(…

数学小课堂:数学的线索(从猜想到定理再到应用的整个过程)

文章目录 引言I 勾股定理1.1 勾三股四弦五1.2 数学和自然科学的三个本质差别1.3 总结引言 从猜想到定理再到应用的整个过程是数学发展和体系构建常常经历的步骤。 I 勾股定理 勾股定理: 直角三角形两条直角边的平方之和等于斜边的平方,这个定理在国外都被称为毕达哥拉斯定理…

渗透中超全的Google hack语法

inurl:Login 将返回url中含有Login的网页intitle:后台登录管理员 将返回含有管理员后台的网页intext:后台登录 将返回含有后台的网页inurl:/admin/login.php 将返回含有admin后台的网页inurl:/phpmyadmin/index.php 将返回含有phpmyadmin后台的网页site:http://baidu.com inur:…

云计算|OpenStack|使用VMware安装华为云的R006版CNA和VRM

前言&#xff1a; FusionCompute架构 (CNA、VRM) CNA(ComputingNode Agent):计算节点代理VNA虚拟节点代理&#xff0c;部署在CNA上&#xff0c;实施计算、存储、网络的虚拟化的配置管理。VRM(Virtual Resource Manager):虚拟资源管理器 VNA可以省略不安装 本次实验使用的是V…

还在用chatGPT聊天?《元宇宙2086》已开始用AIGC做漫画连载了!

ChatGPT 是由 OpenAI开发的一个人工智能聊天机器人程序&#xff0c;于 2022 年 11 月推出。该程序使用基于 GPT-3.5架构的大型语言模型并通过强化学习进行训练。 ChatGPT 目前仍以文字方式互动&#xff0c;而除了可以透过人类自然对话方式进行交互&#xff0c;还可以用于相对复…

关于微前端,你想知道的都在这!

更多请关注微前端专题 https://codeteenager.github.io/Micro-Frontends/ 介绍 微前端官网&#xff1a;https://micro-frontends.org/ 问题&#xff1a;如何实现多个应用之间的资源共享&#xff1f; 之前比较多的处理方式是npm包形式抽离和引用&#xff0c;比如多个应用项目之…

EMR Studio Workspace 访问 Github ( 公网Git仓库 )

EMR Studio Workspace访问公网Git仓库 会遇到很多问题,由于EMR Studio不能给出任何有用的错误信息,导致排查起来非常麻烦。下面总结了若干项注意事项,可以避免踩坑。如果你遇到了同样的问题,请根据以下部分或全部建议去修正你的环境,问题即可解决。本文地址:https://laur…

因子的有效性检验(IC)

使用神经网络的预测值作为因子载荷&#xff08;因子暴露&#xff0c;因子值 factor&#xff09;时&#xff0c; 我们需要知道这个因子是否是有效的&#xff0c;所以要做因子的有效性检验。 当前的学术论文给出的IC&#xff0c; rankIC 这些都是属于判断因子是否有效的metric 因…

gdb的简单练习

题目来自《ctf安全竞赛入门》1.用vim写代码vim gdb.c#include "stdio.h" #include "stdlib.h" void main() {int i 100;int j 101;if (i j){printf("bingooooooooo.");system("/bin/sh");}elseprintf("error............&quo…

面向对象的程序设计C++课堂复盘总结 C语言复习+C++基础语法

Stay Hungry&#xff0c;Stay Foolish. 任何人都能写出机器能看懂的代码&#xff0c;但只有优秀的程序员才能写出人能看懂的代码。 有两种写程序的方式&#xff1a;一种是把代码写得非常复杂&#xff0c;以至于 “看不出明显的错误”&#xff1b;另一种是把代码写得非常简单&am…

DolphinScheduler第一章:环境安装

系列文章目录 DolphinScheduler第一章&#xff1a;环境安装 文章目录系列文章目录前言一、环境准备1.上传文件2.数据库配置3.配置安装文件二、集群部署1.数据部署2.部署 DolphinScheduler3. DolphinScheduler 启停命令总结前言 我们现在开始学习hadoop中的DolphinScheduler组…

Spring Cloud Nacos源码讲解(一)- Nacos源码分析开篇

Nacos源码开篇 Nacos服务注册与发现源码剖析 Nacos核心功能点 服务注册&#xff1a;Nacos Client会通过发送REST请求的方式向Nacos Server注册自己的服务&#xff0c;提供自身的元数据&#xff0c;比如ip地址、端口等信息。Nacos Server接收到注册请求后&#xff0c;就会把这…

Linux基础命令-uname显示系统内核信息

前言 这个命令主要是显示系统内核的相关信息&#xff0c;一般需要查看内核信息才会使用到这个命令&#xff0c;一起来看看吧。 一 命令的介绍 uname命令来自于英文词组“Unix name”的缩写&#xff0c;其功能是用于查看系统主机名、内核及硬件架构等信息。如果不加任务参数&am…

GPT-4——比GPT-3强100倍

GPT-4——比GPT-3强100倍 当前世界上最强大的人工智能系统当属ChatGPT。推出2个月用户数就突破1亿。ChatGPT是当下最炙手可热的话题&#xff0c;科技圈几乎人人都在讨论。这边ChatGPT的热度还在不断攀升&#xff0c;另一边来自《纽约时报》的最新报道称ChatGPT即将被自家超越&…

深入浅出C++ ——二叉搜索树

文章目录一、二叉搜索树概念二、二叉搜索树操作1. 二叉搜索树的查找2. 二叉搜索树的插入3. 二叉搜索树的删除三、二叉搜索树的实现四、二叉搜索树的性能分析一、二叉搜索树概念 二叉搜索树又称二叉排序树/二次查找树&#xff0c;它是一棵空树或者是每颗子树都具有以下性质的二叉…

[qiankun]-多页签缓存

[qiankun]-多页签缓存环境功能需求多页签缓存方案方案1.主服务进行html替换方案2.微服务vnode 替换方案3.每个微服务都不卸载微服务加载方式的选择微服务的路由路径选择微服务的缓存工具微服务的容器使用tab作为微服务的挂载容器使用微服务路由作为微服务的挂载容器场景描述微服…