你的位置:首页 > Java教程

[Java教程]省市区


都说我们要做模块化设计,而不要做功能化设计

什么是模块化设计,就是可插拔性高,组件化,想要就用,不要用拉倒,直接删除就行

什么是功能化设计,就是一个简单的功能,实现想要的效果,但是不够通用化,别人要用的话需要读懂你的代码,还需要复制黏贴很多代码这样效率不高

 

今天写了一个省市区三级联动的模块,写完后使用会非常方便,也很灵活

主要使用到的技术:jquery,redis,springMVC,MyBatis(springMVC和MyBatis无所谓,你用struts或者hibernate或者spring data都行)

首先页面引入js

1 <script src="http://www.cnblogs.com//js/jquery-2.2.4.min.js"></script>2 <script src="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