基于springboot和layUI实现省市区三级联动
2019-08-05 17:26
423 查看
版权声明:本文为博主原创文章,遵循 CC 4.0 by-sa 版权协议,转载请附上原文出处链接和本声明。
本文链接:https://blog.csdn.net/qq_38650808/article/details/98496480
基于springboot和layUI实现省市区三级联动
实现结果
实现步骤
总共分为前端部分和后台部分
前端部分代码
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1"> <title>三级联动演示</title> <link rel="stylesheet" href="../layui/css/layui.css"> <link rel="stylesheet" href="../css/common1.css"> <style> body {margin:20px} .squy { width: 140px; } </style> </head> <body> <div > <fieldset class="layui-elem-field layui-field-title" > <legend>三级联动</legend> </fieldset> <!-- form 内容区域--> <form class="layui-form layui-form-pane" lay-filter="form1" action=""> <div class="layui-form-item"> <label class="layui-form-label">行政区域</label> <div class="layui-input-inline squy" id="quiz1" style="width: 140px;"> <select name="province" id="province" lay-filter="province" lay-verify="required"> <option value="">请选择省</option> </select> </div> <div class="layui-input-inline squy" style="width: 140px;"> <select name="city" id="city" lay-filter="city" lay-verify="required"> <option value=''>请选择市</option> </select> </div> <div class="layui-input-inline squy" style="width: 140px;"> <select name="county" id="county" lay-filter="county" lay-verify="required"> <option value="">请选择县/区</option> </select> </div> <div class="layui-input-inline squy" style="width: 140px;"> <select name="town" id="town" lay-filter="town"> <option value="">请选择镇</option> </select> </div> </div> </form> </div> <script src="../layui/layui.js"></script> <script src="../modules/jquery.min.js"></script> <script> //JavaScript代码区域 layui.config({ version: true //为了更新 js 缓存,可忽略 ,base: '../modules/' //你存放新模块的目录,注意,不是layui的模块目录 }); if(!"[[${batch_id}]]" || "[[${status}]]" != 1){ $("#closeswitch").hide() }else{ $("#test1").val(Format("[[${validity_begin}]]","yyyy-MM-dd")) $("#test2").val(Format("[[${validity_end}]]","yyyy-MM-dd")) $("#recharge_type").val("[[${recharge_type}]]") } layui.use(['form'], function(){ var form = layui.form; layui.$.ajax({ type : 'post', url : "http://127.0.0.1:8080/area/province", data : { 'fatherID' : 1,'level' : 1 }, success : function(data) { data=decodeURIComponent(data); var res=JSON.parse(data); $.each(res,function(i,item){ layui.$("#province").append("<option value='"+item["laa_id"]+"'>"+item["laa_name"]+"</option>"); }) form.render('select');//初始化select选项 }, error: function(XMLHttpRequest, textStatus, errorThrown) { layui.layer.msg(XMLHttpRequest.responseText); } }); //表单初始赋值 form.val('form1', { "title": "[[${batch_name}]]", "corporate_name": "[[${corporate_name}]]", }) form.on('select(province)', function(data){ $("#city").empty(); $("#county").empty(); $("#town").empty(); console.info(data); layui.$("#city").append("<option value=''>请选择市</option>"); layui.$("#county").append("<option value=''>请选择县/区</option>"); layui.$("#town").append("<option value=''>请选择镇</option>"); form.render("select"); if($("#province").val()){ layui.$.ajax({ type : 'post', url : "http://127.0.0.1:8080/area/child", data : { 'id' : $("#province").val(),'level' : 2 }, success : function(data) { data=decodeURIComponent(data); var res1=JSON.parse(data); console.info(res1); $.each(res1,function(i,item){ layui.$("#city").append("<option value='"+item["laa_id"]+"'>"+item["laa_name"]+"</option>"); }) form.render('select'); }, error: function(XMLHttpRequest, textStatus, errorThrown) { layui.layer.msg(XMLHttpRequest.responseText); } }); } }) form.on('select(city)', function(data){ $("#county").empty(); $("#town").empty(); layui.$("#county").append("<option value=''>请选择县/区</option>"); layui.$("#town").append("<option value=''>请选择镇</option>"); form.render("select"); if($("#city").val()){ layui.$.ajax({ type : 'post', url : "http://127.0.0.1:8080/area/child", data : { 'id' : $("#city").val(),'level' : 3 }, success : function(data) { data=decodeURIComponent(data); var res1=JSON.parse(data); console.info(res1); $.each(res1,function(i,item){ layui.$("#county").append("<option value='"+item["laa_id"]+"'>"+item["laa_name"]+"</option>"); }) form.render('select'); }, error: function(XMLHttpRequest, textStatus, errorThrown) { layui.layer.msg(XMLHttpRequest.responseText); } }); } }) form.on('select(county)', function(data){ $("#town").empty(); layui.$("#town").append("<option value=''>请选择镇</option>"); form.render("select"); if($("#county").val()){ layui.$.ajax({ type : 'post', url : "http://127.0.0.1:8080/area/child", data : { 'id' : $("#county").val(),'level' : 4 }, success : function(data) { data=decodeURIComponent(data); var res1=JSON.parse(data); console.info(res1); $.each(res1,function(i,item){ layui.$("#town").append("<option value='"+item["laa_id"]+"'>"+item["laa_name"]+"</option>"); }) form.render('select'); }, error: function(XMLHttpRequest, textStatus, errorThrown) { layui.layer.msg(XMLHttpRequest.responseText); } }); } }) }); </script> </body> </html>
后台DAO层代码
package province.dao; import java.util.HashMap; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.jdbc.core.namedparam.NamedParameterJdbcTemplate; import org.springframework.stereotype.Repository; @Repository public class ProvinceDao { @Autowired NamedParameterJdbcTemplate namejdbc; public List<Map<String, Object>> provinceList() { String sql = "select * from demo.area where laa_level= '1' "; List<Map<String,Object>> list = namejdbc.queryForList(sql,new HashMap<String,Object>()); return list; } public List<Map<String, Object>> childList(int id) { Map<String,Object> paramMap=new HashMap<String,Object>(); StringBuilder sql = new StringBuilder("select * from demo.area where 1=1 "); if(id > 0) { sql.append(" and laa_fatherid = :laa_fatherid"); paramMap.put("laa_fatherid", id); } List<Map<String,Object>> list = namejdbc.queryForList(sql.toString(),paramMap); return list; } }
后台Service层
package province.service; import java.util.List; import java.util.Map; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Service; import province.dao.ProvinceDao; @Service public class ProvinceService { @Autowired private ProvinceDao provinceDao; public List<Map<String, Object>> provinceList() { return provinceDao.provinceList(); } public List<Map<String, Object>> childList(int id){ return provinceDao.childList(id); } }
后台Controller层
package province.controller; import java.io.UnsupportedEncodingException; import java.net.URLEncoder; import org.springframework.beans.factory.annotation.Autowired; import org.springframework.stereotype.Controller; import org.springframework.ui.Model; import org.springframework.web.bind.annotation.RequestMapping; import org.springframework.web.bind.annotation.ResponseBody; import net.sf.json.JSONArray; import province.service.ProvinceService; @Controller @RequestMapping("area") public class ProvinceController { @Autowired private ProvinceService provinceService; @RequestMapping("/hello") public String hello() { return "province"; } @ResponseBody @RequestMapping("/province") public String provinceList() throws UnsupportedEncodingException{ String str = JSONArray.fromObject(provinceService.provinceList()).toString(); str = URLEncoder.encode(str, "UTF-8"); return str; } @ResponseBody @RequestMapping("/child") public String childList(int id) throws UnsupportedEncodingException { String str = JSONArray.fromObject(provinceService.childList(id)).toString(); str = URLEncoder.encode(str, "UTF-8"); return str; } }
相关文章推荐
- Ajax来实现下拉框省市区三级联动效果(服务端基于express)
- 基于jquery实现省市区三级联动效果
- PHP开发中基于layUI的三级联动效果如何实现
- layui自定义插件citySelect实现省市区三级联动选择
- 003.SpringBoot实现三级联动
- springmvc+ajax实现省市区三级联动以及406 (Not Acceptable)的解决办法
- Vue2仿淘宝实现省市区三级联动
- 基于jQuery+ashx+.net实现三级栏目联动操作
- VUE+elementUI Select 前端实现 三级省市区联动
- 基于spring-boot和docker-java实现对docker容器的动态管理和监控功能[附完整源码下载]
- 使用AJax和JavaScript实现省市区三级联动
- Springboot 实现 Restful 服务,基于 HTTP / JSON 传输
- 基于jQuery的AJAX实现三级联动菜单
- 基于Spring Boot和Spring Cloud实现微服务架构学习(一)-Spring框架介绍
- SpringBoot2.0 基础案例(14):基于Yml配置方式,实现文件上传逻辑
- 基于 MongoDB 及 Spring Boot 的文件服务器的实现
- javascript利用selected属性实现省市区三级联动
- 基于Spring Boot 2.0 及MongoDB 3.6.2 实现的简单文件共享服务器
- SpringBoot整合mybatis、shiro、redis实现基于数据库的细粒度动态权限管理系统实例
- Ajax+mybaits实现省市区三级联动