基于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;
}
}
