都说我们要做模块化设计,而不要做功能化设计
什么是模块化设计,就是可插拔性高,组件化,想要就用,不要用拉倒,直接删除就行
什么是功能化设计,就是一个简单的功能,实现想要的效果,但是不够通用化,别人要用的话需要读懂你的代码,还需要复制黏贴很多代码这样效率不高
今天写了一个省市区三级联动的模块,写完后使用会非常方便,也很灵活
主要使用到的技术:jquery,redis,springMVC,MyBatis(springMVC和MyBatis无所谓,你用struts或者hibernate或者spring data都行)
首先页面引入js
1 <script src='/images/loading.gif' data-original="http://www.cnblogs.com//js/jquery-2.2.4.min.js"></script>2 <script src='/images/loading.gif' data-original="http://www.cnblogs.com//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 @ResponseBody12 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宝,可以参考如下链接,真的是太强大了,把省市区直接细化到了极致:
省市区 数据库 脚本 excel
原标题:省市区
关键词: