都说我们要做模块化设计，而不要做功能化设计
什么是模块化设计，就是可插拔性高，组件化，想要就用，不要用拉倒，直接删除就行
什么是功能化设计，就是一个简单的功能，实现想要的效果，但是不够通用化，别人要用的话需要读懂你的代码，还需要复制黏贴很多代码这样效率不高
今天写了一个省市区三级联动的模块，写完后使用会非常方便，也很灵活
主要使用到的技术：jquery，redis，springMVC，MyBatis（springMVC和MyBatis无所谓，你用struts或者hibernate或者spring data都行）
首先页面引入js
1 <script src="/js/jquery-2.2.4.min.js"></script> 2 <script src="/cityselect/js/jquery.cityselect.js"></script>
HTML中写入3个div块，这是互斥的，div#id不同就可以做到模块化可插拔
1 <div id="city"> 2 <select class="prov"></select> 3 <select class="city" disabled="disabled"></select> 4 <select class="dist" disabled="disabled"></select> 5 </div> 6 7 <div id="city2"> 8 <select class="prov"></select> 9 <select class="city" disabled="disabled"></select> 10 <select class="dist" disabled="disabled"></select> 11 </div> 12 13 <div id="city3"> 14 <select class="prov"></select> 15 <select class="city" disabled="disabled"></select> 16 <select class="dist" disabled="disabled"></select> 17 </div>
初始化JS：
<script type="text/javascript"> /** * * @Description: 省市区三级联动api * Copyright: Copyright (c) 2016 * * ============================== * 参数说明 * url:省市数据josn文件路径 * prov:默认省份 * city:默认城市 * dist:默认地区（县） * nodata:无数据状态 * required:必选项 * ============================== * * @author leechenxiang * @date 2016年6月16日 下午3:46:58 * @version V1.0 */ $(function(){ $("#city").citySelect({ prov:"江苏省", city:"无锡市", dist:"南长区", required:false }); $("#city2").citySelect({ nodata:"none", required:false }); $("#city3").citySelect({ nodata:"none", required:false }); }); </script>
后台controller：
1 /** 2 * 3 * @Description: 获取所有的省市区列表 4 * @return 5 * @throws Exception 6 * 7 * @author leechenxiang 8 * @date 2016年6月16日 上午11:22:10 9 */ 10 @RequestMapping("/getCities") 11 @ResponseBody 12 public CitiesDataResult getCities() throws Exception { 13 CitiesDataResult areas = commonService.getAllCities(); 14 return areas; 15 }
service：
1 @Override 2 public CitiesDataResult getAllCities() { 3 // 取出缓存 4 try { 5 String citiesDataResult = jedisClient.get(REDIS_CITIES_KEY); 6 if (!StringUtils.isBlank(citiesDataResult)) { 7 CitiesDataResult redisResult = JsonUtils.jsonToPojo(citiesDataResult, CitiesDataResult.class); 8 return redisResult; 9 } 10 } catch (Exception e1) { 11 e1.printStackTrace(); 12 } 13 14 List<AreaProvince> provinceList = areaProvinceMapper.getProvinceList(); 15 List<Province> pList = new ArrayList<Province>(); 16 for (AreaProvince province : provinceList) { 17 int provinceId = province.getProvinceId(); 18 String provinceName = province.getProvinceName(); 19 20 List<AreaCity> cityList = areaProvinceMapper.getCityListBypId(provinceId); 21 List<City> cList = new ArrayList<City>(); 22 for (AreaCity city : cityList) { 23 int cityId = city.getCityId(); 24 String cityName = city.getCityName(); 25 26 List<District> districtList = areaProvinceMapper.getDistrictListBycId(cityId); 27 28 City c = new City(); 29 c.setN(cityName); 30 c.setA(districtList); 31 cList.add(c); 32 } 33 34 Province p = new Province(provinceName, cList); 35 pList.add(p); 36 } 37 38 CitiesDataResult result = new CitiesDataResult(); 39 result.setCitylist(pList); 40 41 // 放入缓存 42 try { 43 jedisClient.set(REDIS_CITIES_KEY, JsonUtils.objectToJson(result)); 44 } catch (Exception e) { 45 e.printStackTrace(); 46 } 47 48 return result; 49 }
如果需要默认选中那么只需要对这3个参数赋值即可：
prov:"江苏省", city:"无锡市", dist:"南长区",
对于省市区的数据源，可以存放在数据库表中，也可以直接存入js，作为一个json来调用即可
如果没有省市区可以淘一下万能的X宝，可以参考如下链接，真的是太强大了，把省市区直接细化到了极致:
