springmvc+spring+mybatis+jquery+js動態讀取省市區資料
阿新 • • 發佈：2019-02-06
業務要求：
新增資料：省市區資料從後臺讀取，前臺根據選擇的省，聯動展示市，區
修改資料：省市區資料從後臺讀取，預設展示選中的資料，然後可以重新省，聯動查詢市，區
頁面效果：
初始化：
選擇省，聯動查詢市，區，小區
新增頁面：
編輯頁面：<!-- Modal:新增店鋪 --> <div class="modal fade" id="addStore" role="dialog" aria-hidden="true"> <div class="modal-dialog" style="width:800px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">新增店鋪</h4> </div> <form role="form" class="form-horizontal" id="addStoreForm" method="post" action="addMyStore.htm" enctype="multipart/form-data" > <div class="modal-body"> <div class="modal_form"> <div class="form-group"> <label class="control-label col-sm-4"><span class="text-danger">*</span>所在小區：</label> <div class="col-sm-1"></div> <div class="col-sm-4"> <select class="form-control required province" name="storeProvince" onchange="changeProvince('addStore',this.options[this.options.selectedIndex].value)"></select> </div> <div class="col-sm-1"></div> <div class="col-sm-4"> <select class="form-control city" name="storeCity" onchange="changeCity('addStore',this.options[this.options.selectedIndex].value)"></select> </div> <div class="col-sm-1"></div> <div class="col-sm-4"> <select class="form-control district" name="storeCounty" onchange="changeDistrict('addStore',this.options[this.options.selectedIndex].value)"></select> </div> <div class="col-sm-1"></div> <div class="col-sm-4"> <select class="form-control required village" name="storeVillage" onchange="changeVillage('addStore')"></select> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" onclick="saveMyStore();">儲存</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> </div> </form> </div> </div> </div>
<!-- Model:編輯店鋪 --> <div class="modal fade" id="editStore" role="dialog" aria-hidden="true"> <div class="modal-dialog" style="width:800px;"> <div class="modal-content"> <div class="modal-header"> <button type="button" class="close" data-dismiss="modal"><span aria-hidden="true">×</span><span class="sr-only">Close</span></button> <h4 class="modal-title">編輯店鋪</h4> </div> <form role="form" class="form-horizontal" id="editStoreForm" method="post" action="editMyStore.htm" enctype="multipart/form-data" > <div class="modal-body"> <div class="modal_form"> <div class="form-group"> <label class="control-label col-sm-4"><span class="text-danger">*</span>所在小區：</label> <div class="col-sm-1"></div> <div class="col-sm-4"> <select class="form-control required province" name="storeProvince" onchange="changeProvince('editStore',this.options[this.options.selectedIndex].value)" ></select> </div> <div class="col-sm-1"></div> <div class="col-sm-4"> <select class="form-control city" name="storeCity" onchange="changeCity('editStore',this.options[this.options.selectedIndex].value)" ></select> </div> <div class="col-sm-1"></div> <div class="col-sm-4"> <select class="form-control district" name="storeCounty" onchange="changeDistrict('editStore',this.options[this.options.selectedIndex].value)"></select> </div> <div class="col-sm-1"></div> <div class="col-sm-4"> <select class="form-control required village" name="storeVillage" onchange="changeVillage('editStore')"></select> </div> </div> </div> </div> <div class="modal-footer"> <button type="button" class="btn btn-primary" onclick="editMyStore();">儲存</button> <button type="button" class="btn btn-default" data-dismiss="modal">取消</button> </div> </form> </div> </div> </div>
js寫法：
/** * 初始化 */ $(function(){ //新增店鋪載入省份 loadProvice('addStore'); //編輯店鋪載入省份 loadProvice('editStore'); }); /** * 載入省份 * @param modalId 模態框id */ function loadProvice(modalId){ $.ajax({ type: 'post', url:'getAllProvince.htm', async:false, cache:false, success: function(data) { var options = ""; options += "<option value=''>"+"請選擇"+"</option>"; if(data!=null){ for( var i=0; i<data.length; i++){ var province=data[i]; options += "<option value='"+province.provinceId+"'>"+province.provinceName+"</option>"; } $("#"+modalId).find(".province").html(options); } } }); //根據省份編號載入該省份下所有城市 loadCity(modalId,$("#"+modalId).find(".province").val()); }; /** * 根據省份編號載入該省份下所有城市 * @param modalId 模態框id * @param pId 省份編號 */ function loadCity(modalId,pId){ $.ajax({ type: 'post', url:'getAllCityByPid.htm', async:false, cache:false, data:{"provinceId":pId}, dataType:"json", success: function(data) { var options = ""; if(data.length!=0){ for( var i=0; i<data.length; i++){ var city=data[i]; options += "<option value='"+city.cityId+"'>"+city.cityName+"</option>"; } $("#"+modalId).find(".city").html(options); }else{ $("#"+modalId).find(".city").html("<option value='' >"+"請選擇"+"</option>"); $("#"+modalId).find(".district").html("<option value='' >"+"請選擇"+"</option>"); $("#"+modalId).find(".village").html("<option value='' >"+"請選擇"+"</option>"); } } }); //根據城市編號載入該城市下所有區縣 loadDistrict(modalId,$("#"+modalId).find(".city").val()); } /** * 根據城市編號載入該城市下所有區縣 * @param modalId 模態框id * @param cId 市（城市） */ function loadDistrict(modalId,cId){ $.ajax({ type: 'post', url:'getAllDistrictByCid.htm', async:false, cache:false, data:{"cityId":cId}, dataType:"json", success: function(data) { var options = ""; if(data.length != 0){ for( var i=0; i<data.length; i++){ var district=data[i]; options += "<option value='"+district.districtId+"'>"+district.districtName+"</option>"; } $("#"+modalId).find('.district').html(options); }else{ $("#"+modalId).find('.district').html("<option value='' >"+"請選擇"+"</option>"); $("#"+modalId).find(".village").html("<option value='' >"+"請選擇"+"</option>"); } } }); // 根據區縣編號載入該區縣下所有城市小區 loadVillage(modalId,$("#"+modalId).find(".district").val()); } /** * 根據區縣編號載入該區縣下所有城市小區 * @param modalId 模態框id * @param DId 區縣id */ function loadVillage(modalId,dId){ $.ajax({ type: 'post', url:'getAllCountryByDid.htm', async:false, cache:false, data:{"districtId":dId}, dataType:"json", success: function(data) { var options = ""; if(data.length != 0){ for( var i=0; i<data.length; i++){ var village=data[i]; options += "<option value='"+village.villageId+"'>"+village.villageName+"</option>"; } $("#"+modalId).find('.village').html(options); }else{ $("#"+modalId).find('.village').html("<option value='' >"+"請選擇"+"</option>"); } } }); } /** * 省份改變時觸發事件 * @param modalId 模態框id */ function changeProvince(modalId,pId){ loadCity(modalId,pId); } /** * 城市改變時觸發事件 * @param modalId 模態框id */ function changeCity(modalId,cId){ loadDistrict(modalId,cId); } /** * 區縣改變時觸發事件 */ function changeDistrict(modalId,dId){ loadVillage(modalId,dId); } /** * 小區改變時觸發事件 * @param modalId 模態框id */ function changeVillage(modalId){ //當改變小區時重新輸入經緯度，因為每個小區的經緯度不一樣 $("#"+modalId).find("input[name=tude]").val(''); } /** * 編輯店鋪選中的省市區 * @param pId 省份編號 * @param cId 城市編號 * @param dId 區縣編號 * @param vId 小區編號 * @param modalId 模態框id */ function selectOption(pId,cId,dId,vId,modalId){ //測試用 // alert("pId:"+pId);alert("cId:"+cId); // alert("dId:"+dId);alert("vId:"+vId); // alert("modalId:"+modalId); //選中省份 $("#"+modalId).find(".province option[value='"+pId+"']").prop("selected","selected"); //載入城市 loadCity(modalId,pId); //選中城市 $("#"+modalId).find(".city option[value='"+cId+"']").prop("selected","selected"); //載入區縣 loadDistrict(modalId,cId); //選中區縣 $("#"+modalId).find(".district option[value='"+dId+"']").prop("selected","selected"); //載入小區 loadVillage(modalId,dId); //選中小區 $("#"+modalId).find(".village option[value='"+vId+"']").prop("selected","selected"); }
點選編輯彈框顯示資料，展示預設選中的省市區，小區
/**
* 編輯店鋪彈出框並初始化
* @param storeId 店鋪id
*/
function editStore(storeId){
//清空form表單
$("#editStoreForm")[0].reset();
//根據店鋪id查詢店鋪資訊
$.ajax({
type:"post",
url: "findStoreInfoById.htm",
data:{"storeId":storeId},
dataType:"json",
success: function(data){
//編輯模態框id
var modalId="editStore";
//省份編號
var pId=data.storeProvince;
//城市編號
var cId=data.storeCity;
//區縣編號
var dId=data.storeCounty;
//店鋪所在省市區,小區
selectOption(pId,cId,dId,vId,modalId);
//彈出編輯店鋪模態框
$("#editStore").modal("show");
}
});
}後臺查詢資料：
/**
* 查詢所有省份
* @return List<ProvinceBean> 省份集合
* @see {@link com.qianjiang.other.bean.ProvinceBean}
*/
@RequestMapping("/getAllProvince")
@ResponseBody
public List<ProvinceBean> getAllProvince() {
return customerServiceMapper.selectAllProvince();
}
/**
* 根據省份編號查詢該省份下所有城市
* @return List<CityBean> 城市集合
* @see {@link com.qianjiang.other.bean.CityBean}
*/
@RequestMapping("/getAllCityByPid")
@ResponseBody
public List<CityBean> getAllCityByPid(Long provinceId) {
return customerServiceMapper.selectAllCityByPid(provinceId);
}
/**
* 根據城市編號查詢該城市下所有區縣
* @return List<CityBean> 區縣集合
* @see {@link com.qianjiang.other.bean.DistrictBean}
*/
@RequestMapping("/getAllDistrictByCid")
@ResponseBody
public List<DistrictBean> getAllDistrictByCid(Long cityId) {
return customerServiceMapper.selectAllDistrictByCid(cityId);
}
/**
* 根據區縣編號查詢所有城市小區
* @param districtId 區縣編號
* @return
*/
@RequestMapping("/getAllCountryByDid")
@ResponseBody
public List<VillageBean> getAllCountryByDid(Long districtId){
return customerServiceMapper.getAllCountryByDid(districtId);
}<!-- 查詢所有省份-->
<select id="selectAllProvince" resultMap="proviceMap">
select
p.province_id,p.province_name
from t_sys_province p
where p.del_flag = '0'
</select> <!-- 查詢所有城市根據省份編號-->
<select id="selectAllCityByPid" resultMap="cityMap" parameterType="java.lang.Long">
select
c.city_id,c.city_name
from t_sys_city c
where c.province_id = #{provinceId,jdbcType=BIGINT}
and c.del_flag = '0'
</select><!-- 查詢所有區縣根據城市編號-->
<select id="selectAllDistrictByCid" resultMap="districtMap" parameterType="java.lang.Long">
select
d.district_id,d.district_name
from t_sys_district d
where d.city_id = #{cityId,jdbcType=BIGINT}
and d.del_flag = '0'
</select><!-- 根據區縣編號查詢所有城市小區 -->
<select id="getAllCountryByDid" parameterType="java.lang.Long" resultMap="villageMap">
select v.id as "village_id",v.name as "village_name" ,v.county as "district_id"
from t_village v
where v.county=#{districtId}
</select>備註：
省，市，區，小區，資料庫設計這裡均是分開設計，每個表省，市，區，小區等表都是一一關聯。